<!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>
版权声明:本文为博主原创文章,未经博主允许不得转载。
分享到:
相关推荐
电信设备-一种可动态传播信息的双层杯具.zip
【酒店客房杯具消毒制度】客房杯具消毒流程..doc
杯具消毒流程.doc
宾馆杯具消毒规范.pdf
酒店客房杯具消毒制度.pdf
电子政务-杯具电动清洁器.zip
杯具清洗消毒卫生制度扫描.pdf
xx宾馆杯具清洗消毒卫生操作规程.docx
杯具消毒的标准与程序借鉴.pdf
杯具消毒的标准与程序实用.pdf
《杯具的消毒规范》PPT课件.ppt
“杯具”的完整发展史!网络新词越来越有内涵了!.doc
教育资料完美版
在网上搜了一通后, 发现中文世界到处都在吹 VS 2010 怎么怎么怎么好, 但就是没一篇文章... 真是杯具.... 没人说, 只好自己动手丰衣足食了. 经搜索找到了这一张版本比较图, 发出来给大家看看, 好选择下载适合自己的版本
杯具是09年的新词,现在有网友把它做成了一首歌,听听吧!mp3加LRC同步歌词。
jboss 4.2.2.GA part2,办公区上不了官网,只能先传到这里了。和我一样杯具的码农可以下了使用。
ROS流控脚本 代号“杯具”免费版 ROS流控脚本 代号“杯具”免费版
Jquery下载,用Jquery的朋友有福了..我找了好久才找到的.. 诶.杯具阿
七彩杯具背景PPT精美模板适用于自我介绍主题设计应用。