使用bootstraptable插件实现表格记录的查询、分页、(4)

//操作栏的格式化 function actionFormatter(value, row, index) { var id = value; var result = ""; result += "<a href='javascript:;' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span></span></a>"; result += "<a href='javascript:;' onclick=\"EditViewById('" + id + "')\" title='编辑'><span></span></a>"; result += "<a href='javascript:;' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span></span></a>"; return result; }

如果我们需要双击弹出编辑界面的层，我们可以处理表格的双击事件，如下代码所示。

onDblClickRow: function (row, $element) { var id = row.ID; EditViewById(id, 'view'); },

如果我们需要设置行的不同的样式展示，可以通过增加rowStyle的JS处理函数即可，如下代码所示

rowStyle: function (row, index) { //设置行的特殊样式 //这里有5个取值颜色['active', 'success', 'info', 'warning', 'danger']; var strclass = ""; if (index == 0) { strclass = "warning"; } return { classes: strclass } }

对于表格记录的获取，我们可以通过下面的代码进行获取：$table.bootstrapTable('getSelections')

var rows = $table.bootstrapTable('getSelections'); if (rows.length > 0) { ID = rows[0].ID; }

如果是多条记录的处理，例如删除记录

//实现删除数据的方法 function Delete() { var ids = "";//得到用户选择的数据的ID var rows = $table.bootstrapTable('getSelections'); for (var i = 0; i < rows.length; i++) { ids += rows[i].ID + ','; } ids = ids.substring(0, ids.length - 1); DeleteByIds(ids); }

如果需要设置显示列显示，如下界面所示

以及排序处理

这些需要在JS代码开启相关的属性即可。

还有就是一种CardView的卡片视图格式，如下所示。

另外一种是父子表的展开明细的格式，如下所示

以上就是bootstrap-table插件在我实际项目中的应用情况，基本上对JS各个属性的使用进行了一些介绍了，具体的应用我们可以参考它的文档，获取对应属性、方法、事件的详细说明，这样我们就可以更加详细的应用这个插件的各种功能了。

总结

以上所述是小编给大家介绍的使用bootstraptable插件实现表格记录的查询、分页、排序操作，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章: