bootstarp table 使用及常用参数说明

来源:互联网 发布:c语言开发环境 编辑:程序博客网 时间:2024/05/16 10:38
下面的代码是我实际工作用到的,下面标注一下常用的属性说明

$(function () {// 数据表格展示,destroy参数表示丢弃原来的table,重新构造新的table$.getJSON("test.json", function(data){initDataTable("destroy", data);});



function initDataTable(op, data){$("#data_info").bootstrapTable(op).bootstrapTable({method: "get",        //  请求方式有get和post两种,一般get就行了toolbar: "#toolbar",        //  指明自定义的toolbar,它是一个jQuery选择器,使用场景:比如,自定义新增、修改、删除等操作striped: true,                //  隔行变色pagination: true,            // 分页sidePagination: "client",    // 分页的方式,客户端分页和服务器端分页,两者的区别:客户端分页是一次性将数据返回后展现,服务器端分页是每次点击下一页后才会从后台取数据pageNumber: 1,     // 首页页码cache:false,        // 是否启用缓存search: true,      // 搜索框sortable: true,        // 排序sortOrder: "desc",    // 设置排序的方式searchOnEnterKey: true,        // 当搜索框启用后,再开启这个设置,表示按回车后触发搜索;否则自动触发搜索showColumns: true,        // 显示内容列下拉框showRefresh: true,        // 显示刷新按钮showToggle: true,        // 显示切换试图按钮uniqueId: "id",        // 指示每一行的唯一标识符,一般使用id来做为标识,当使用table的事件时,就可以捕获这个值pageSize: 10,           // 每页显示10条信息pageList: [10, 25, 50, 100],    // 设置可供选择的页面数据条数columns: [{                            // table所要显示的列checkbox: true}, {field: "name",            // field的值要和后台返回的json字段保持一致title: "Name",            // 列名sortable: true            // 排序}, {field: "comments",title: "描述",sortable: true}, {field: "contacts_email",title: "报警联系人邮箱",// sortable: true}, {field: "contacts_phone",title: "报警联系人电话",// sortable: true}, {field: "IP",title: "IP",// sortable: true}, {field: "create_time",title: "创建时间",sortable: true}, {field: "update_time",title: "更新时间",sortable: true},{field: "use_flag",title: "更新状态",sortable: true}],data: formatData(data),   // 用于接收后台返回的json数据});}// 为table格式化json返回的数据var formatData = function (data) {var l = []for (var i = 0; i < data.data_list.length; i++) {var m = data.data_list[i]var d = {'id': m.id,'name': m.name,'comments': m.comments,'IP': m.IP,'Port': m.Port,'contacts_email': m.contacts_email,'contacts_phone': m.contacts_phone,'create_time': m.create_time,'update_time': m.update_time,   }l.push(d)}return l};



原创粉丝点击