java 表格插件_[Java教程]自己写的表格插件autotable

[Java教程]自己写的表格插件autotable

0 2014-05-07 11:00:09

自己写的表格插件autotable

作者：田想兵,个人网址:http://www.lovewebgames.com

这个表格插件所完成的功能是：ajax请求数据，然后动态绑定到指定表格下，格式化，分页处理，自二级的父子级操作、多选。固定操作列等。。。

插件演示地址：表格一 表格二 表格三 表格四 表格五例： $(".autoTable").autoTable({ column:[{ name:"name",type:"link",url:"asdfasd.html",args:["id"] },{ name:"money",type:"money",align:'right' },{ name:"money",type:"money",align:'right' },{ name:"money",type:"money",align:'right' },{ name:"money",type:"money",align:'right' },{ name:"type",type:"text" },{ name:"NO",type:"text" },{ name:"status",type:"text" },{ action:true,child:[ { isp:true, type:'html',click:function(){ }, html:'功能选项' }, { isc:true, type:'html',click:function(){ }, html:'编辑  追溯' } ] } ], className:'scroll-table-innertable', ref:'id', datasource:"data.txt",//请求 childsource:'data2.txt',//请求 ispager:true, //是否有分页 pagerContainer:$(".pagerCon")//分页容器 });

如上调用方式.

固定列的调用方式是：$(".dockTable").dockTable({ columns:[ { type:"auto", column:[{ name:"name",type:"link",url:"asdfasd.html",args:["id"] },{ name:"money",type:"money",align:'right' },{ name:"money",type:"money",align:'right' },{ name:"money",type:"money",align:'right' },{ name:"money",type:"money",align:'right' },{ name:"type",type:"text" },{ name:"NO",type:"text" },{ name:"status",type:"text" } ]},{ type:"dock", column:{ action:true, html:'属性  编辑' } } ], className:'scroll-table-innertable', ref:'id', datasource:"data2.txt", ispager:true, pagerContainer:$('.pagerContainer'), callback:function(args){ } }); });

注意：这里调用的是docktable，此类扩展于autotable.

单元格的调用方式是：$(".autoTable").autoTable({ column:[{ name:"name",type:"link",url:"asdfasd.html",args:["id","name"] },{ name:"money",type:"money",align:'right',update:true,callback:"updateColumn"//,updateurl:"update.txt" },{ name:"money",type:"money",align:'right' },{ name:"money",type:"money",align:'right' },{ name:"date",type:"date",align:'right',update:true,updateurl:"update.txt" },{ name:"type",type:"text",update:true,callback:"updateColumn" },{ name:"NO",type:"text" },{ name:"status",type:"text" },{ action:true, child:[ { type:'html', html:'点击查看' } ] },{ name:"id",type:"text",className:'hide' } ], className:'white-row', ref:'id', datasource:"data2.txt?key=123", ispager:true });

插件演示地址：表格一 表格二 表格三 表格四 表格五

本文网址：http://www.shaoqun.com/a/90544.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

0