哥又杯具了.......

最新推荐文章于 2021-02-20 15:37:42 发布

wtcsy

最新推荐文章于 2021-02-20 15:37:42 发布

阅读量981

点赞数

分类专栏： javascript 随笔。。。。。。文章标签： function table url jquery border object

本文链接：https://blog.csdn.net/wtcsy/article/details/3391048

版权

javascript 随笔。。。。。。专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
ul li{list-style:none;}
#xx{
height:620px; width:720px; /*border:1px solid #333;*/
}
#xx table{
font-size:12px;
border-collapse:collapse;
}

#xx table thead a{
background-color:#C3DAF9;
    background-image:url("grid3-hd-btn.gif");
display:none;
width:12px;
height:22px;
float:right;
background-position:0 -14px;
}
.theadfocus{
background-image:url(grid3-hrow-over.gif);
}
#xx table,#xx table tr,#xx table tr td{

-moz-user-select: none;
}
#xx table{
width:800px;
}
#xx table thead div{
width:1px;
height:22px;
background-color:#00F;
float:left;
cursor:e-resize;
margin-right:2px;
}
#xx table thead td{
line-height:22px;
}
#xx table tr,#xx table tr td{
height:22px;
}
.trfocus{
background-color:#CFC
}
.x-menu{
position:absolute;
background:url(menu.gif) repeat-y #F0F0F0;
border:1px solid #718BB7;
width:134px;
display:none;
}
.x-menu .disabled a{
color:#999;
}
.x-menu-list{padding:2px; overflow:hidden; margin:0;}
.x-menu-list li{padding:1px; white-space:nowrap; height:20px;}
.x-menu-list li.focus{backround:#09F;}
a.x-menu-item{
cursor: pointer;
    display: block;
    line-height: 16px;
height:16px;
    outline-color: -moz-use-text-color;
    outline-style: none;
    outline-width: 0;
    padding: 3px 21px 3px 27px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
font-size:12px;
color:#222;
}
.asc{background:url(hmenu-asc.gif) no-repeat;}
.desc{background:url(hmenu-desc.gif) no-repeat;}
.columns{background:url(columns.gif) no-repeat;}
.rowfocus{/*background:url(columns.gif);*/font-weight:bolder}
.head_span{
float:left;
}
.sort=asc .head_span{
padding-right:18px;
background:url(sort_asc.gif) no-repeat right center;
}
.sort=desc .head_span{
padding-right:18px;
background:url(sort_desc.gif) no-repeat right center;
}

.submenu{
position:absolute;
z-index: 15005;
background:url(menu.gif) repeat-y #F0F0F0;
border:1px solid #718BB7;
width:134px;
display:none;
}
.line{
width:2px;background-color:#999;position:absolute;display:none;
}
</style>
<body><div id='xcv'></div>
<div id='xx'></div>

        $.each(data.data,function(i,o){
         self.data = self.data.concat(o.rows);
        });
       }

      }
      options.showGroup = false;
     }

     theadTr = $c('tr',self.thead[0]);
     $.each(options.fileds,function(i,o){
      var td = $c('td',theadTr);
      td.innerHTML = (i == 0 ? '':'<div></div>') + '<span class="head_span">' + o.name + '</span>';
      var aa =$c('a',td);
      $(td).attr({clos:i,width:o.width,className:o.type===undefined?'':'type-'+o.type});
      o.primaryKey&&(self.primaryKey = i);
      o.sortFun&&($.ui.smartTable.sortType[o.type]=o.sortFun);
     });
     self.element.html('').append(self.table);
     self.buildTbody();
    };

    if(typeof dataOrUrl === 'object'){
     cbData(dataOrUrl);
    }else if(typeof dataOrUrl === 'string'){
     $.ajax({
      type : "get",
      url : dataOrUrl,
      success : function(data){
       cbData(typeof data==='string'?eval(data):data);
      }
     });
    }else{
     this.element.html('数据源不正确.........');
     return ;
    }

   },
   buildTbody : function(){
    var i=0,j=0,data = this.data,trsLen = data.length,tdsLen =data[0].length,tr,td,opts=this.options,d=document,tbody=this.tbody[0];
    function $c(name,p){
     var elem = d.createElement(name);
     p&&p.appendChild(elem);
     return elem;
    }
    for(;i<trsLen;i++){
     tr = $c('tr',tbody);
     this.rows.push(tr);
     for(j=0;j<tdsLen;j++){
      var td = $c('td',tr),
       sty = opts.fileds[j]==='false'?'':'edit';
      td.setAttribute('unselectable','on');
      if(opts.fileds[j].render){
       var render = opts.fileds[j].render;
       td.innerHTML = render.func(render.sty,data[i][j]);
      }else
       td.innerHTML = data[i][j];
      tr.appendChild(td)
     }
     tbody.appendChild(tr);
    }
   }
  });

  $.extend($.ui.smartTable,{
   defaults : {
    showGroup : false,
    perPage : 10
   },
   cellRender :{
    date : function(sty,val){
     return val.replace(/(/d{4})-(/d{2})-(/d{2})$/g,'$1年$2月$3日')
    }
   },
   sortType : {
    int    : function(v){return parseInt(v)},
    float : function(v){return parseFloat(v)},
    date   : function(v){return v.toString()},
    string : function(v){return v.toString()}
   }
  });
})(jQuery);
$(document).ready(function(){
  var data = {
   total:120,
   data : [
    {
     groupName : '平安银行',
     rows : [
      ['1','信用卡-账单','123.00','人民币','1984-05-27','阿斯顿的风格'],
      ['2','基金-账单','234.00','日元','1934-05-27','士大夫'],
      ['3','信用卡-账单','435.00','人民币','1964-05-27','士大夫'],
      ['4','一张同-账单','12.00','美元','1984-07-27','阿斯顿的风格'],
      ['5','信用卡-账单','345.00','人民币','1984-05-27','色温的风格'],
      ['6','国债-账单','34.00','欧元','1984-05-29','阿斯顿的风格'],
      ['7','一张同-账单','345534.00','人民币','1984-05-27','士大夫我饿死'],
      ['8','信用卡-账单','12.00','人民币','1984-05-17','uyyu'],
      ['9','国债-账单','2131.00','人民币','1982-05-27','一块发']
     ]
    },
    {
     groupName : '交通银行',
     rows : [
      ['10','一张同-账单','123.00','人民币','1984-05-27','阿斯顿的风格'],
      ['12','一张同-账单','1.00','日元','1984-05-27','士大夫'],
      ['13','一张同-账单','2.00','人民币','1984-05-27','士大夫'],
      ['14','一张同-账单','12.00','美元','1984-05-27','阿斯顿的风格'],
      ['15','信用卡-账单','4.00','人民币','1984-05-27','色温的风格'],
      ['16','基金-账单','5.00','欧元','1984-05-27','阿斯顿的风格'],
      ['17','信用卡-账单','345534.00','人民币','1984-05-27','士大夫我饿死'],
      ['18','国债-账单','12.00','人民币','1984-05-27','uyyu'],
      ['19','信用卡-账单','234.00','人民币','1984-05-27','一块发']
     ]
    }
   ]
  }

  var data1 = {
   total:120,
   data : [
    ['1','信用卡-账单','123.00','人民币','1984-05-27','阿斯顿的风格'],
    ['2','基金-账单','234.00','日元','1934-05-27','士大夫'],
    ['3','信用卡-账单','435.00','人民币','1964-05-27','士大夫'],
    ['4','一张同-账单','12.00','美元','1984-07-27','阿斯顿的风格'],
    ['5','信用卡-账单','345.00','人民币','1984-05-27','色温的风格'],
    ['6','国债-账单','34.00','欧元','1984-05-29','阿斯顿的风格'],
    ['7','一张同-账单','345534.00','人民币','1984-05-27','士大夫我饿死'],
    ['8','信用卡-账单','12.00','人民币','1984-05-17','uyyu'],
    ['9','国债-账单','2131.00','人民币','1982-05-27','一块发'],
    ['10','一张同-账单','123.00','人民币','1984-05-27','阿斯顿的风格'],
    ['12','一张同-账单','1.00','日元','1984-05-27','士大夫'],
    ['13','一张同-账单','2.00','人民币','1984-05-27','士大夫'],
    ['14','一张同-账单','12.00','美元','1984-05-27','阿斯顿的风格'],
    ['15','信用卡-账单','4.00','人民币','1984-05-27','色温的风格'],
    ['16','基金-账单','5.00','欧元','1984-05-27','阿斯顿的风格'],
    ['17','信用卡-账单','345534.00','人民币','1984-05-27','士大夫我饿死'],
    ['18','国债-账单','12.00','人民币','1984-05-27','uyyu'],
    ['19','信用卡-账单','234.00','人民币','1984-05-27','一块发']
   ]
  }

  var data2 =[
    ['1','信用卡-账单','123.00','人民币','1984-05-27','阿斯顿的风格'],
    ['2','基金-账单','234.00','日元','1934-05-27','士大夫'],
    ['3','信用卡-账单','435.00','人民币','1964-05-27','士大夫'],
    ['4','一张同-账单','12.00','美元','1984-07-27','阿斯顿的风格'],
    ['5','信用卡-账单','345.00','人民币','1984-05-27','色温的风格'],
    ['6','国债-账单','34.00','欧元','1984-05-29','阿斯顿的风格'],
    ['7','一张同-账单','345534.00','人民币','1984-05-27','士大夫我饿死'],
    ['8','信用卡-账单','12.00','人民币','1984-05-17','uyyu'],
    ['9','国债-账单','2131.00','人民币','1982-05-27','一块发'],
    ['10','一张同-账单','123.00','人民币','1984-05-27','阿斯顿的风格'],
    ['12','一张同-账单','1.00','日元','1984-05-27','士大夫'],
    ['13','一张同-账单','2.00','人民币','1984-05-27','士大夫'],
    ['14','一张同-账单','12.00','美元','1984-05-27','阿斯顿的风格'],
    ['15','信用卡-账单','4.00','人民币','1984-05-27','色温的风格'],
    ['16','基金-账单','5.00','欧元','1984-05-27','阿斯顿的风格'],
    ['17','信用卡-账单','345534.00','人民币','1984-05-27','士大夫我饿死'],
    ['18','国债-账单','12.00','人民币','1984-05-27','uyyu'],
    ['19','信用卡-账单','234.00','人民币','1984-05-27','一块发']
  ]

  $('#xx').smartTable({
   fileds :[
     {name:'id',type:'int',edit:'false',width:'80',primaryKey:true},
     {name:'名称',type:'string',edit:'true',width:'120'},
     {name:'金额',edit:'true',width:'400'},
     {name:'币种',type:'int',edit:'true',width:'100'},
     {name:'日期',type:'date',render:{sty:'y年m月d日',func:$.ui.smartTable.cellRender.date},edit:'true',width:'100'},
     {name:'说明',type:'yyy',sortFun:function(){},edit:'true',width:'100'}
   ],
   dataOrUrl : data,
   showGroup : true
  });
});

</script>
</body>
</html>

wtcsy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
哥又杯具了.......

var jQuery = {};function extend(){ var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options; if ( typeof target === "boolean" ) { deep = target;
复制链接

扫一扫