缺点:功能与datagrid或者ligerui的grid等比较起来缺少很多,不过这些都可以自己扩展,需要费比较大的精力。
下面是我的一个小小案例,里面有些方法是我自己额外加的,大家可以自行删除掉,不然会报错。 本人不太喜欢通过for循环去展现表单,一切都是ajax,劲量减少html的编写,不然项目参与人多了后代码就会非常乱。JavaScript可以封装,尽量让开发人员少些代码。
DatatableHelper这个封装已经在之前的博客上贡献出来了。
关于columns中的多余属性:dataType: "dict", dataTypeValue: 'common.is'是传递到后台进行数据转换的,需要自己改一下源码,让后台把值转换好后传回前端展现。
比如日期格式的换砖,bool值的转换,i18n的转换和数据字典的转换。
var TableDatatablesAjax = function () { var grid; var handleRecords = function () { grid = new DatatableHelper(); var gridSize = Public.setGrid(); grid.init({ src: $("#datatable_ajax"), onSuccess: function (grid, response) { }, onError: function (grid) { }, onDataLoad: function(grid) { TableDatatablesAjax.getDatatableHelper().getDataTable().row(':eq(0)').select(); }, loadingMessage: 'Loading...', dataTable: { "scrollY": gridSize.h - 55, "scrollX": true, dom: 'Bfrtip', columns: [{ data: "id", title: "编号", width: 40, fixed: true, align: "center" },{ data: "username", title: "登陆账号", width: 100, align: "left" },{ data: "name", title: "姓名", defaultContent: "", width: 80, align: "left" },{ data: "email", title: "邮箱", defaultContent: "", width: 120, align: "left" },{ data: "mobilePhoneNumber", title: "手机号", defaultContent: "", width: 120, align: "left" },{ data: "createDate", title: "创建时间", defaultContent: "", width: 120, align: "left", dataType: 'format', dataTypeValue:'yyyy-MM-dd' },{ data: "status", title: "账户状态", width: 120, align: "left", dataType: "i18n", dataTypeValue: "UserStatus" },{ data: "admin", title: "管理员", width: 80, align: "left", dataType: "dict", dataTypeValue: 'common.is' }], "bStateSave": true, "ajax": { "url": location.href, }, buttons: [ 'selectAll', 'selectNone' ], "order": [ [1, "asc"] ] } }); // handle group actionsubmit button click grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) { e.preventDefault(); var action = $(".table-group-action-input", grid.getTableWrapper()); if (action.val() != "" && grid.getSelectedRowsCount() > 0) { grid.setAjaxParam("customActionType", "group_action"); grid.setAjaxParam("customActionName", action.val()); grid.setAjaxParam("id", grid.getSelectedRows()); grid.getDataTable().ajax.reload(); grid.clearAjaxParams(); } else if (action.val() == "") { App.alert({ type: 'danger', icon: 'warning', message: 'Please select an action', container: grid.getTableWrapper(), place: 'prepend' }); } else if (grid.getSelectedRowsCount() === 0) { App.alert({ type: 'danger', icon: 'warning', message: 'No record selected', container: grid.getTableWrapper(), place: 'prepend' }); } }); //grid.setAjaxParam("customActionType", "group_action"); //grid.getDataTable().ajax.reload(); //grid.clearAjaxParams(); } return { init: function () { handleRecords(); }, getDatatableHelper: function(){ return grid; } }; }(); jQuery(document).ready(function() { TableDatatablesAjax.init(); SetUI(); }); HTML代码 <div class="table-container"> <table class="table table-striped table-bordered table-hover table-checkable dataTable no-footer" id="datatable_ajax"> </table> </div>
截图: