[置顶] 银行MIS系统前台开发总结(2)-dataTable控件
2013-01-18 09:12
453 查看
趁着现在还有点时间,我再来说说这次项目的一些收获。 接下来说说Datatable控件:
接下来的这个有点复杂,实现了在每条数据后加载checkbox元素,和input元素。都是动态添加的,这是一种实现方式,仅供参考。。
接下来给一个动态添加表头的吧:
var dataTable; function loadTable() { $dataTable = $('#ID').dataTable( { "bJQueryUI" : true, "sPaginationType" : "full_numbers", "aoColumns" : [ { "sTitle" : "机构号", "sWidth" : "6%", "sClass" : "center" }, { "sTitle" : "机构名称", "sWidth" : "6%", "sClass" : "center" }] }); }最基础的dataTable控件的使用,这是声明表头,看看名字就应该知道含义了吧,就不说了。 效果就是下面,可以实现自动排序,搜索功能,排序功能,还有分页显示,这些都是控件集成的
接下来的这个有点复杂,实现了在每条数据后加载checkbox元素,和input元素。都是动态添加的,这是一种实现方式,仅供参考。。
$dataTable = $('#XXID').dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers", "aoColumns": [ { "sTitle": "经理 ", "sWidth": "6%", "sClass": "center"}, { "sTitle": "账户号", "sWidth": "6%", "sClass": "center" }, { "sTitle": "账号名称", "sWidth": "8%", "sClass": "center" }, { "sTitle": "产品/业务量", "sWidth": "7%", "sClass": "center" }, { "sTitle": "数量", "sWidth": "4%", "sClass": "center" }, { "sTitle": "金额", "sWidth": "4%", "sClass": "center" }, { "sTitle": "维护日期", "sWidth": "6%", "sClass": "center" }, { "sTitle": "审核确认", "sWidth": "8%", "sClass": "center", "fnRender":function(obj, value){ var sReturn = '<input type="checkbox" class="submitbox" value="' + value + '" this)">确认'+ '<input type="checkbox" class="returnbox" value="' + value + '" this)" >退回'; return sReturn; } }, { "sTitle": "退回理由", "sWidth": "15%", "sClass": "center" , "fnRender":function(obj){ var sReturn ='<input type="text" class="returnback" id="reason" style="width:95%" disabled>'; return sReturn; } } ] });因为现在没有连上服务器和数据库,所以效果图出不来。。都是通过fnReader这个函数实现的。
接下来给一个动态添加表头的吧:
function initTable(productName){ $('#dptProdOpenAmTable_wrapper').empty(); $('#dptProdOpenAmTable_wrapper').append("<table id='dptProdOpenAmTable'><thead><tr><th>机构号</th><th>机构名称</th>" + ""+productName+"</tr></thead></table>"); $dataTable = $('#dptProdOpenAmTable').dataTable( { "bJQueryUI" : true, "sPaginationType" : "full_numbers", "bDestroy":true }); }这里需要注意几点,这个datatable的id因为是动态生成的,所以在引用的时候需要你用chorme看一下即时html代码,看一下datatable控件的具体Id,就比方这里的dptProdOpenAmTable_wrapper,这个productName是我在其他地方获取的,格式是<th>XXXXX</th><th>XXXXX</th>这样就可以了,接下来就是后台数据给的问题了。这个就可以实现动态的添加一列。 接下来说说获取datatable数据的代码吧,很简单,
success : function(data) { var productdata = data; $dataTable.fnClearTable(); $dataTable.fnAddData(productdata); }这就可以了,当然可以再解析一下data,比方说
success: function(data){ busData = data.businessReviewdata; $dataTable.fnClearTable(); $dataTable.fnAddData(busData); }其实这些都是json的问题,有空的话,下一次具体说这个吧。我其实也不太会哎,这些都是交给后台去完成了,或是让学长去弄了,我学的不多哎,尽量把。 好了,差不多关于dataTable控件的知识也就这些了吧,具体的就去查源码,官网上有具体的example的,还有文档,这个用的还是很多的,多学学有好处。
相关文章推荐
- [置顶] 银行MIS系统前台开发总结(3)-dataTable控件应用2
- [置顶] 银行MIS系统前台开发总结(1)
- [原创]银行MIS系统前台开发总结(3)-dataTable控件应用2
- 银行MIS系统前台开发总结(3)-dataTable控件应用2
- 银行MIS系统前台开发总结(2)-dataTable控件
- [原创]银行MIS系统前台开发总结(2)-dataTable控件
- [原创]银行MIS系统前台开发总结(1)
- [原创]银行MIS系统前台开发总结(3)
- 银行MIS系统前台开发总结(1)
- [置顶] 【Visual C++】游戏开发笔记之一——API函数、DirectX的关键系统
- [置顶] Web开发百宝箱——提升网站档次的时尚 jQuery 图片滚动插件
- [置顶] 【办公采购系统】系统中遇到的问题汇总(三)——DropDownList控件使用总结
- [置顶] spring2.5 + struts2 + ibatis2.3.4 框架整合开发
- [置顶] 用java调用oracle存储过程总结
- Winform开发框架之权限管理系统改进的经验总结(1)-TreeListLookupEdit控件的使用
- [置顶] ARM芯片学习内容规划及ARM开发环境的搭建
- [置顶] axis 开发webservice
- [置顶] Hibernate4实战 之 第三部分:Hibernate的基本开发
- [置顶] iOS流媒体开发之一:总结系统提供的接口
- [置顶] jquery技巧总结