365bet电子平台-【亚洲官方投注】

热门关键词: 365bet电子平台,365bet亚洲官方投注,365bet真人在线投注

JS组件系列之Bootstrap

2020-01-05 15:55 来源:未知

Bootstrap Table是轻量级的和功能丰盛的以表格的花样体现的数据,扶持单选,复选框,排序,分页,展现/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡牌视图等。明天就结成Bootstrap table的父亲和儿子表和行列调序的用法再来介绍下它有一点点高端点的用法。

bootstrap table系列:

JS表格组件神器bootstrap table精解

JS组件体系之Bootstrap table表格组件神器

JS组件种类之Bootstrap table表格组件神器

大器晚成、效果展现

后日多少改造下方式,先来探视完成效果与利益,前边再介绍代码达成及注意事项。来,效果图来一发:

1、父亲和儿子表效果图

2、行调序

3、列调序

二、父亲和儿子表代码详细解释

上章大家介绍Bootstrap table底蕴用法的时候介绍过,初阶化表格的时候有贰个属性“detailView”,将它设置为true,在每行的前头就能够看出叁个“+”形状的Logo。点击那一个Logo即触发加载子表格的平地风波。差非常少的规律正是这么,来探访代码,其实也很简短。

1、开始化表格,注册行张开事件

$.bootstrapTable({url: '/api/MenuApi/GetParentMenu',method: 'get',detailView: true,//父子表//sidePagination: "server",pageSize: 10,pageList: [10, 25],columns: [{field: 'MENU_NAME',title: '菜单名称'}, {field: 'MENU_URL',title: '菜单URL'}, {field: 'PARENT_ID',title: '父级菜单'}, {field: 'MENU_LEVEL',title: '菜单级别'}, ],//注册加载子表的事件。注意下这里的三个参数!onExpandRow: function  {oInit.InitSubTable;}}); 

可能来拜候子表加载事件onExpandRow对应方法function 的多个参数,

index:父表当前进的行索引。

row:父表当前进的Json数据对象。

$detail:当前行上边创设的新行里面包车型客车td对象。

其八个参数越发关键,因为变化的子表的table在装载在$detail对象里面包车型地铁。bootstrap table为大家转移了$detail那么些目的,然后大家只必要往它在那之中填充大家想要的table就能够。

2、大家来看oInit.InitSubTable(卡塔尔国这么些主意

//初始化子表格oInit.InitSubTable = function  {var parentid = row.MENU_ID;var cur_table = $detail.html.find.bootstrapTable({url: '/api/MenuApi/GetChildrenMenu',method: 'get',queryParams: { strParentID: parentid },ajaxOptions: { strParentID: parentid },clickToSelect: true,detailView: true,//父子表uniqueId: "MENU_ID",pageSize: 10,pageList: [10, 25],columns: [{checkbox: true}, {field: 'MENU_NAME',title: '菜单名称'}, {field: 'MENU_URL',title: '菜单URL'}, {field: 'PARENT_ID',title: '父级菜单'}, {field: 'MENU_LEVEL',title: '菜单级别'}, ],//无线循环取子表,直到子表里面没有记录onExpandRow: function (index, row, $Subdetail) {oInit.InitSubTable(index, row, $Subdetail);}});}; 

透过能够看来生成子表的规律便是创设三个table对象cur_table,然后再登记那么些指标的表格开始化就能够。是或不是很简短~~

三、行调序代码安详严整

行调序的代码就更轻巧了,来探望。

1、须要拾贰分援用五个js文件

2、在cshtml页面定义表格时,加多多个属性

接下来js表格伊始化的时候不须求做此外更改,加载出来的报表就可以兑现行反革命调序的职能。

四、列调序代码详细解释

和行调序形似。列调序的应用如下:

1、额外引用几个js和css

2、在cshtml页面定义表格时,加多一个属性

另内地点不用做任何校勘。加载出来的报表就能够兑现列调序。有未有非常轻易。

五、控件过滤

本来那篇希图达成的,猛然想起上章里面有三个搜索的效果与利益,好疑似服务端分页的时候搜索效果无法使用,于是想起此前再CS里面做过贰个形似每个列过滤的机能,博主好奇心又起来了,bootstrap table是或不是也会有这种表格每列过滤的功用,于是查看文书档案。结果不辜负所望,还真有~~大家来拜候。

1、效果图体现

2、代码示例

引进额外js

概念表格属性及表头属性

角色名称 角色描述 角色默认页面

因为此处定义了表头的属性,所以,js开端化的时候就不要定义列了。

js初始化

$.bootstrapTable({url: '/Role/GetRole',method: 'get',toolbar: '#toolbar',striped: true,cache: false,striped: true,pagination: true,sortable: true,queryParams: function  {return param;},queryParamsType: "limit",detailView: false,//父子表sidePagination: "server",pageSize: 10,pageList: [10, 25, 50, 100],search: true,showColumns: true,showRefresh: true,minimumCountColumns: 2,clickToSelect: true,}); 

最最初,博主感到这种寻觅只可以客户顾客端分页的情状,但是经过调节和测量检验发掘并非那样,原本寻找的规格都能透过json传递到服务端。大家来看调试的进度

后台选用参数,并反体系化

诸如此类大家就能够将查询的原则很好地传递到后台。很好很强盛啊。那样就免去了扩张表格找寻效果的非常的慢~~

六、总结

上述就是bootstrap table的豆蔻年华部分扩大应用。只怕未不完美,还会有大器晚成部分尖端用法也未曾介绍,举个例子行、列合併,行列冻结等等。

以上内容是俺给我们介绍的JS组件类别之Bootstrap table表格组件神器 的连带文化,希望对我们享有利于!

TAG标签:
版权声明:本文由365bet电子平台发布于服务器&运维,转载请注明出处:JS组件系列之Bootstrap