bootstrap table使用总结

来源：互联网发布：微服务架构 java 编辑：程序博客网时间：2024/06/06 01:51

/*bootstrap table*/$('#table').bootstrapTable({    url:"/wadmin/permission/doRuleList",//请求数据url    queryParams: function (params) {        return {            offset: params.offset,  //页码            limit: params.limit,   //页面大小            search : params.search, //搜索            order : params.order, //排序            ordername : params.sort, //排序        };    },    showHeader : true,    showColumns : true,    showRefresh : true,    pagination: true,//分页    sidePagination : 'server',//服务器端分页    pageNumber : 1,    pageList: [5, 10, 20, 50],//分页步进值    search: true,//显示搜索框    //表格的列    columns: [        {            field: 'id',//域值            title: '规则ID',//标题            visible: true,//false表示不显示            sortable: true,//启用排序            width : '5%',        },        {            field: 'name',//域值            title: '唯一英文标识',//标题            visible: true,//false表示不显示            sortable: true,//启用排序            width : '30%',            editable:true,        },        {            field: 'title',//域值            title: '中文描述',//内容            visible: true,//false表示不显示            sortable: true,//启用排序            width : '35%',            editable:true,        },        {            field: 'status',//域值            title: '状态',//内容            visible: true,//false表示不显示            sortable: true,//启用排序            width : '20%',            formatter : function (value, row, index) {                if (row['status'] === 1) {                    return '正常';                }                if (row['status'] === 0) {                    return '禁用';                }                return value;            }        }    ]});

项目里面的一部分配置

 function getTab() {    $.BTTable("#dataTable", {        method: 'get', //请求类型        url: "/UserDetail/GetDataList",//请求地址        pageList: [10, 15, 50, 100],//页数列表        pageSize: 10,        pageNumber: 1,        queryParams: queryParams,//参数        columns: [            {                title: "序号",                field: "RowID",//RowID为rows里面每条数据里面的键，插件自己会调出值                align: "center",                valign: "center",                width: "100",            }, {                title: "中控工号",                field: "PingID",                align: "center",                valign: "center",                width: "100",            }, {                title: "员工姓名",                field: "Name",                align: "center",                valign: "center",                width: "100",            }, {                title: "所属系统",                field: "System",                align: "center",                valign: "center",                width: "100",                formatter: SystemType            }, {                title: "公司名称",                field: "Company",                align: "center",                valign: "center",                width: "100",            }, {                title: "分公司名称",                field: "BCompany",                align: "center",                valign: "center",                width: "100",            }, {                title: "所属部门",                field: "DeptName",                align: "center",                valign: "center",                width: "100",            }, {                title: "入职日期",                field: "EntryDateTime",                align: "center",                valign: "center",                width: "100",                formatter: ShowDate            }, {                title: "转正日期",                field: "ChangeDate",                align: "center",                valign: "center",                width: "100",            }, {                field: 'ces',                title: "操作",                align: 'center',                width: '180',                valign: 'center',                formatter: EditeOpt//返回当前列表的内容            }        ], onLoadSuccess: function () {        },        onLoadError: function () {            //mif.showErrorMessageBox("数据加载失败！");        }    });}//编辑列   formatter键对应的函数会有参数，第一个参数为当前a的值，第二个参数为这个a所在的整行数据function EditeOpt(obj, row) {    return '<a class ="btn btn-info btn-xs" onclick="KQCalendar(\'' + row.GUID + '\',\'' + row.Name + '\',\'' + row.EntryDateTime + '\')">考勤记录</a> ';}

数据格式

{    "total": 522,    "rows": [    {        "ID": 0,        "GUID": "687ee1d8-6731-43a9-9d52-235f426fbc08",        "PName": "投资顾问",        "Name": "李金娣",        "CreatDate": "2017-11-28",        "Remark": null,        "RankId": 24,        "RankName": "投资顾问",        "Status": 1,        "Tel": "13616502732",        "Email": null,        "Sex": "0",        "EID": 3,        "Cid": 12,        "Pid": 222,        "MURL": "ht8.229.222:191/File/20171128141823407.pdf",        "Age": 48,        "UDType": 5,        "RID": 0,        "ContractType": 1,        "DocumentType": "居民身份证",        "Number": "33012519690104522X",        "Birthday": "1969-01-04",        "HighestEID": 3,        "IsInterview": 0,        "DeptCode": "63ea705a-13e4-4409-ac42-eb5abefe02dc",        "DeptName": "-",        "PingID": "000008167",        "Marriage": "1",        "Procreate": "2",        "PlaceCID": 37,        "EntryDateTime": "2017-11-21",        "CompanyEmail": null,        "Company": "至善基金",        "BCompany": "余杭仓前第一营业部",        "ChangeDate": "",        "System": "2",        "DepCentet": "",        "RowID": 1,        "ISLeader": 2,        "QuitDate": null,        "QuitReason": null,        "QuitType": null,        "CompanyPower": null,        "ManagerConfirm": 0,        "ChiefConfirm": 0,        "Portrait": null,        "LeaderPing": "000008153",        "LeaderName": "金霞娟",        "IsLegalPerson": "否"    },    {        "ID": 0,        "GUID": "34f9ceda-faae-453c-adab-449fb013b445",        "PName": "IT总监",        "Name": "曹燕",        "CreatDate": "2017-11-13",        "Remark": null,        "RankId": 4,        "RankName": "总监",        "Status": 1,        "Tel": "18621778199",        "Email": "addincaoy@163.com",        "Sex": "1",        "EID": 1,        "Cid": 1,        "Pid": 302,        "MURL": "htt121:191/File/20171113163701595.doc",        "Age": 35,        "UDType": 5,        "RID": 0,        "ContractType": 1,        "DocumentType": "居民身份证",        "Number": "430424198111281853",        "Birthday": "1981-11-28",        "HighestEID": 1,        "IsInterview": 0,        "DeptCode": "980aed61-1576-4485-88df-4a6ff19daf3a",        "DeptName": "信息管理部",        "PingID": "000000329",        "Marriage": "1",        "Procreate": "2",        "PlaceCID": 55,        "EntryDateTime": "2017-11-21",        "CompanyEmail": null,        "Company": "至善基金总部",        "BCompany": "",        "ChangeDate": "",        "System": "1",        "DepCentet": "信息管理中心",        "RowID": 4,        "ISLeader": 2,        "QuitDate": null,        "QuitReason": null,        "QuitType": null,        "CompanyPower": null,        "ManagerConfirm": 0,        "ChiefConfirm": 0,        "Portrait": null,        "LeaderPing": null,        "LeaderName": null,        "IsLegalPerson": "否"    },    {        "ID": 0,        "GUID": "0fb099d6-f5dc-4bdb-b5e1-f8e2a8587797",        "PName": "分部总监",        "Name": "刘明亮",        "CreatDate": "2017-11-07",        "Remark": null,        "RankId": 19,        "RankName": "分部总监",        "Status": 1,        "Tel": "13918139755",        "Email": null,        "Sex": "1",        "EID": 3,        "Cid": 1,        "Pid": 35,        "MURL": "ht21:191/File/20171116172543161283.doc",        "Age": 49,        "UDType": 5,        "RID": 0,        "ContractType": 1,        "DocumentType": "居民身份证",        "Number": "31010419680721241X",        "Birthday": "1968-07-21",        "HighestEID": 3,        "IsInterview": 0,        "DeptCode": "46554dbc-577a-4280-8e96-852ddd6071b8",        "DeptName": "-",        "PingID": "000003097",        "Marriage": "1",        "Procreate": "2",        "PlaceCID": 55,        "EntryDateTime": "2017-11-20",        "CompanyEmail": null,        "Company": "扬凯投资",        "BCompany": "上海第一营业部",        "ChangeDate": "",        "System": "2",        "DepCentet": "",        "RowID": 9,        "ISLeader": 2,        "QuitDate": null,        "QuitReason": null,        "QuitType": null,        "CompanyPower": null,        "ManagerConfirm": 0,        "ChiefConfirm": 0,        "Portrait": "ht.121:191/Portrait/20171122145713992721.jpg",        "LeaderPing": null,        "LeaderName": null,        "IsLegalPerson": "否"    },    {        "ID": 0,        "GUID": "17ebc6c5-2dbb-4ada-abeb-d9e520de3f85",        "PName": "分部总监",        "Name": "黄晓",        "CreatDate": "2017-11-07",        "Remark": null,        "RankId": 19,        "RankName": "分部总监",        "Status": 1,        "Tel": "18930604029",        "Email": null,        "Sex": "0",        "EID": 3,        "Cid": 1,        "Pid": 35,        "MURL": ":191/File/20171116173247148931.doc",        "Age": 47,        "UDType": 5,        "RID": 0,        "ContractType": 1,        "DocumentType": "居民身份证",        "Number": "310105197002110820",        "Birthday": "1970-02-11",        "HighestEID": 3,        "IsInterview": 0,        "DeptCode": "46554dbc-577a-4280-8e96-852ddd6071b8",        "DeptName": "-",        "PingID": "  000003096 ",        "Marriage": "1",        "Procreate": "2",        "PlaceCID": 55,        "EntryDateTime": "2017-11-20",        "CompanyEmail": null,        "Company": "扬凯投资",        "BCompany": "上海第一营业部",        "ChangeDate": "",        "System": "2",        "DepCentet": "",        "RowID": 10,        "ISLeader": 2,        "QuitDate": null,        "QuitReason": null,        "QuitType": null,        "CompanyPower": null,        "ManagerConfirm": 0,        "ChiefConfirm": 0,        "Portrait": "ht1:191/Portrait/20171122145731246185.jpg",        "LeaderPing": null,        "LeaderName": null,        "IsLegalPerson": "否"    }]}

别人的博客

阅读全文

0 0