bootstrap table表格使用方法详解

bootstrap table表格使用方法详解

本文实例为大家分享了bootstrap table表格的使用方法，供大家参考，具体内容如下

1.进入页面，根据指定的URL加载数据(json格式)

2.加载成功，根据$table.bootstrapTable({options})显示表格样式。

感觉还是挺漂亮的哈，OK，下面贴代码解释功能。

开始之前，当然要引用js啦

html代码，一是指定table要使用的工具栏，而是写一个空的table

新增

修改

删除

js代码，使用("#table").bootstraptable({options})填充table

$("#myTable").bootstrapTable({

url: '/BootstrapTable/GetTestData',

method: 'get',

toolbar: '#toobar',//工具列

striped: true,//隔行换色

cache: false,//禁用缓存

pagination: true,//启动分页

sidePagination: 'client',//分页方式

pageNumber: 1,//初始化table时显示的页码

pageSize: 10,//每页条目

showFooter: false,//是否显示列脚

showPaginationSwitch: true,//是否显示 数据条数选择框

sortable: false,//排序

search: true,//启用搜索

showColumns: true,//是否显示 内容列下拉框

showRefresh: true,//显示刷新按钮

idField: 'SystemCode',//key值栏位

clickToShttp://elect: trCtGjEue,//点击选中checkbox

singleSelect: true,//启用单行选中

columns: [{

checkbox: true

},

{

field: 'SystemCode',

title: '系统代码',

titleTooltip: 'young for you'

},

{

field: 'SystemDesc',

title: '系统名称'

},

{

field: 'Isvalid',

title: '是否有效'

},

{

field: 'UUser',

title: '更新人'

},

{

field: 'UDate',

title: '更新时间'

}],

onClickCell: function (field, value, row, $element) {

//alert(row.SystemDesc);

}

});

其中URL是table 数据源地址，如果table启动了分页功能，后台取数据的方法要加上limit、offset两个int类型的参数，这里把后台代码也贴一下。

public JsonResult GetTestData(int limit, int offset)

{

BugzillaModelContainer db = new BugzillaModelContainer();

List systemInfo = db.B_SystemInfo.ToList();

for (int i = 0; i < 20; i++)

{

B_SystemInfo tempSystem = new B_SystemInfo();

tempSystem.SystemCode = (i + 1).ToString();

tempSystem.SystemDesc = "测试系统" + (i + 1).ToString();

tempSystem.Isvalid = "Y";

tempSystem.UUser = "result_for" + (i + 1).ToString();

tempSystem.UDate = System.DateTime.Now.ToShortDateString();

systemInfo.Add(tempSystem);

}

var total = systemInfo.Count();

var rows = systemInfo.Skip(offset).Take(limit).ToList();

return Json(systemInfo, JsonRequestBehavior.AllowGet);

}

offset表示从多少条数据开始取，limit表示取多少条数据。

客户端搜索只要设置search=true即可。

服务端搜索，需要设置参数。

首先设置

("#table").bootstraptable({queryParams: oTableInit.queryParams}),//传递参数（*）

然后获取查询的参数

//得到查询的参数

oTableInit.queryParams = function (params) {

var temp = {

//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

limit: params.limit, //页面大小

offset: params.offset, //页码

systemcode: $("#systemcode").val(),

};

return temp;

};

通过button事件刷新table，重新获取数据源，即可。

$("#btnQuery").click(function () {

$table.bootstrapTable('refresh');

});

最后贴上全部html代码~

新增

修改

删除

&lhttp://t;/body>

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。