//指定操作组 function operateFormatter(value, row, index) { return [ '<a href="javascript:void(0)" title="Like">', '<i></i>', '</a>', ' <a href="javascript:void(0)" title="Edit">', '<i></i>', '</a>', ' <a href="javascript:void(0)" title="Remove">', '<i></i>', '</a>' ].join(''); }
events用来指定列的事件，比如操作列中指定events: operateEvents来指定每个操作对应的事件处理：
//指定table表体操作事件 window.operateEvents = { 'click .like': function(e, value, row, index) { alert('You click like icon, row: ' + JSON.stringify(row)); console.log(value, row, index); }, 'click .edit': function(e, value, row, index) { editTask(row.Id); }, 'click .remove': function(e, value, row, index) { deleteTask(row.Id); } };
3.3.3. 工具栏事件绑定
工具栏是我们在List.cshtml定义的新增、编辑、删除三个按钮，表格初始化时，直接为toolbar参数指定工具栏对应的id即可，如本例toolba: '#toolbar'。那工具栏按钮的事件在哪绑定呢？直接上代码吧：
//bootstrap-table工具栏按钮事件初始化 var ButtonInit = function() { var oInit = new Object(); var postdata = {}; oInit.Init = function() { //初始化页面上面的按钮事件 $("#btn-add") .click(function() { $("#add").modal("show"); }); $("#btn-edit") .click(function() { var selectedRaido = $table.bootstrapTable('getSelections'); if (selectedRaido.length === 0) { abp.notify.warn("请先选择要编辑的行！"); } else { editTask(selectedRaido[0].Id); } }); $("#btn-delete") .click(function() { var selectedRaido = $table.bootstrapTable('getSelections'); if (selectedRaido.length === 0) { abp.notify.warn("请先选择要删除的行！"); } else { deleteTask(selectedRaido[0].Id); } }); $("#btn-query") .click(function() { $table.bootstrapTable('refresh'); }); }; return oInit; };
该方法会在页面加载初被调用：
var oButtonInit = new ButtonInit(); oButtonInit.Init();
另外函数中使用了bootstrap table预置的2个比较实用的函数：
$table.bootstrapTable('getSelections')：获取表格选择项 $table.bootstrapTable('refresh')：刷新表格
4. 总结
本文主要讲解了如何使用bootstrap table进行后台分页的一般用法，讲解了bootstrap table参数的配置和几个注意事项。其中有很多功能并未讲到，具体请自行查询文档。
您可能感兴趣的文章: