一些想法
1.需要保存获取数据接口和搜索接口
2.单元格区分 展示值和实际数值
如何调用
ftable=new jtable();
var f_post={
"Json":{
"alipay_name":$("#list_alipay_name :selected").text(),
"alipay_name_id":$("#list_alipay_name :selected").attr("index_row"),
}
}
ftable.post(u.file.list,f_post,function(ret){
ftable.create({
"ret":ret,
"frame":{
trans:[
["t_id","ID","text"],
],
}
});
})
css部分
/*sql_window*/
.sql_window_bg{
position: absolute;
width: 100%;
height:100%;
top:0;
left: 0;
z-index: 11;
}
.sql_window_con{
position: absolute;
width: 200px;
height:300px;
z-index: 12;
background: #fff;
border: 1px solid #ddd;
border-width: 0 1px 4px 1px;
padding:10px;
}
/*table补全*/
.table td{
padding: 0 2px !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
.table-page-con{
text-align: center !important;
height:75px;
}
.table-page-con a{
cursor:pointer;
}
.table-mubu{
top:0;
left:0;
position: absolute;
z-index: 99;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
}
.table td .input-group{
max-width: 220px !important;
min-width: 120px !important;
}
.table th {
white-space: nowrap;
padding:4px 3px !important;
}
插件定义部分
*/
//创建table
function jtable(){
var that = this;
this.url;//请求地址
var post_data;//抛出数据
this.trs=[];//全部tr
this.th=[];//表头数据
this.table=document.createElement("table");//表格
this.css="table";
this.table.className=this.css;
this.sqlkey={};
var callback;
var ret;
this.target=$(".maintable");//注入目标
this.post=function(){
this.loading();
this.url=arguments[0];
post_data=arguments[1];
callback=(typeof(arguments[2])=="undefined")?callback:arguments[2];
ajax(this.url,post_data,callback);
}
var frame={
"trans":undefined,
"hide":undefined,
"fixed":undefined,
"post_page_num":undefined,
"search":undefined,
}
this.create=function(){
this.loadend();
this.target.empty();
this.trs=[];//全部tr
this.th=[];//表头数据
this.table.innerHTML="";
ret=arguments[0].ret;
frame=(typeof(arguments[0].frame)=="undefined")?frame:arguments[0].frame;
if(typeof(ret.data[0])=="undefined"){console.log("数据为空");return;}
if(!(ret.data instanceof Array)){console.log("传入非数组");return;}
//存在 页码字段
if(!!ret.countnum&&!!ret.pagemax&&ret.pagemax>1){
this.createpage(ret);
}
//不存在 sql_key 字段
if(!post_data.Json.sql_key){
that.sqlkey={};
}
for(var i =0 , len = ret.data.length; i= '"+keyvalue+"'",
sqlkey_field:type,
}
break;
case "less":
that.sqlkey[sqlkey_field]={
"value":keyvalue,
"sqltext":sqlkey_field+" <= '"+keyvalue+"'",
sqlkey_field:type,
}
break;
}
var post_sql=[];
// for(var sql_i in that.sqlkey){
// post_sql.push(that.sqlkey[sql_i].sqltext)
// }
post_data.Json.sql_key=that.sqlkey;
console.table(that.sqlkey);
console.log(post_data.Json.sql_key);
// post_data.Json.sql_key
that.post(that.url,post_data,callback)
sql_w.close()
}
sql_w.init();
}
}
function sql_window(){
this.top=0;
this.left=0;
this.width=250;
this.height="auto";
this.father;
this.result;
this.ret;
var that=this;
this.init=function(){
that.father.style.position="relative";
var sql_bg=document.createElement("div");
sql_bg.className="sql_window_bg";
sql_bg.addEventListener("click",that.close);
document.body.appendChild(sql_bg);
var sql_w=document.createElement("div");
sql_w.className="sql_window_con";
sql_w.style.top=that.top +22+"px";
var fatherLeft=that.father.offsetLeft;
var winWidth=window.innerWidth;
sql_w.style.left=that.left-((fatherLeft>(winWidth/2))?that.width:0)+"px";
sql_w.style.width=this.width+"px";
sql_w.style.height=this.height;
this.father.appendChild(sql_w)
//top
var sql_w_top=document.createElement("div");
sql_w_top.className=" sql_window_top";
sql_w.appendChild(sql_w_top);
//-close按钮
var sql_close_btn=document.createElement("span");
sql_close_btn.className="glyphicon glyphicon-remove pull-right";
sql_close_btn.addEventListener("click",that.close);
sql_w_top.appendChild(sql_close_btn);
//-全选按钮
var sql_allselect_btn = document.createElement("input");
sql_allselect_btn.setAttribute("type","checkbox");
sql_allselect_btn.checked=(!!this.ret&&this.ret.value!="")?false:true;
sql_allselect_btn.addEventListener("click",that.selectAll)
sql_w_top.appendChild(sql_allselect_btn);
var sql_allselect_zh=document.createElement("span");
sql_allselect_zh.innerHTML="全选";
sql_w_top.appendChild(sql_allselect_zh);
//选项窗口
this.sql_w_mid=document.createElement("div");
this.sql_w_mid.className="sql_window_mid";
sql_w.appendChild(this.sql_w_mid)
//-输入框
var sql_input = document.createElement("input");
sql_input.className="form-control keyvalue";
sql_input.setAttribute("placeholder","搜索关键字");
sql_input.value=(!!that.ret&&that.ret.value!="")?that.ret.value:"";
this.sql_w_mid.appendChild(sql_input);
//-按钮
var sql_btn = document.createElement("button");
sql_btn.className="btn-xs btn-primary";
//-模糊搜索
var mohu_btn=sql_btn.cloneNode(true);
mohu_btn.innerHTML="模糊搜索";
mohu_btn.addEventListener("click",function(){that.finish("like")})
this.sql_w_mid.appendChild(mohu_btn)
//-精确搜索
var acc_btn=sql_btn.cloneNode(true);
acc_btn.innerHTML="精确搜索";
acc_btn.addEventListener("click",function(){that.finish("accuracy")})
this.sql_w_mid.appendChild(acc_btn)
//-大于搜索
var more_btn=sql_btn.cloneNode(true);
more_btn.innerHTML="大于此值";
more_btn.addEventListener("click",function(){that.finish("more")})
this.sql_w_mid.appendChild(more_btn)
//-小于搜索
var less_btn=sql_btn.cloneNode(true);
less_btn.innerHTML="小于此值";
less_btn.addEventListener("click",function(){that.finish("less")})
this.sql_w_mid.appendChild(less_btn)
}
this.selectAll=function(){
// console.dir(this);
if(this.checked){
that.finish("all");
}
}
this.finish;
this.close=function(){
// alert(1);
$(".sql_window_bg").remove();
$(".sql_window_con").remove();
// $(that.father).find("")
}
}
function jt_child(){
this.type="td";
this.css;
this.row=undefined;
this.obj;
this.create=function(){
this.type=arguments[0];
this.css=arguments[1];
this.row=arguments[2];
this.obj=document.createElement(this.type);
this.obj.className=this.css;
if(typeof(this.row)!="undefined"){
this.obj.setAttribute("row",this.row)
}
}
}
//上传过滤
function post_filter(arr){
var post_arr_type = typeof(arr);
switch (post_arr_type) {
case "string":
if(arr == ""){
return false;
}
break;
case "undefined":
console.log("输入的资料未定义")
return false;
break;
case "object":
for(var key in arr){
var value = post_filter(arr[key]);
if(!value){
return false;
}
}
}
return arr;
}
//呼叫提醒
function arm (str){
str=(!str)?"数据为空":str;
if(!debug){alert(str)};
console.log(str)
}
//去除空格---函数法
//删除左右两端的空格
function trim(str){
return str.replace(/(^\s*)|(\s*$)/g, "");
}
//删除左边的空格
function ltrim(str){
return str.replace(/(^\s*)/g,"");
}
//删除右边的空格
function rtrim(str){
return str.replace(/(\s*$)/g,"");
}