`
scomouse
  • 浏览: 14947 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

<!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>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src='jquery-ui-1.7.3.custom.min.js'></script>

<script type="text/javascript">
(function($){
$.widget('ui.smartTable',{
_init: function(){
var $ = window.jQuery,
options = this.options,
dataOrUrl = options.dataOrUrl,
self = this,
d = document;
function $c(name,p){
var elem = d.createElement(name);
p&&p.appendChild(elem);
return elem;
}
this.element.html('正在加载请等候.........');
this.table = $($c('table'));
this.table.attr({cellpadding :"0",cellspacing:"0",border :"1",bordercolor:"#333"});
this.thead = $($c('thead',this.table[0]));
this.tbody = $($c('tbody',this.table[0]));
this.data = [];
this.groupHead = [];
this.rows =[];


function cbData(data){
if(options.showGroup&&data.data&&data.data[0].groupName){
//如果设置了分组 并且数据源中存在groupName属性 生成this.data
$.each(data.data,function(i,o){
self.groupHead.push(o.groupName);
$.each(o.rows,function(j,obj){
obj.push(i)
self.data.push(obj);
});
});
}else{
if($.isArray(data)){
//如果数据源是纯数组
self.data = data;
}else{
if($.isArray(data.data[0])){
self.data = self.data.concat(data.data);
}else{

$.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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics