jqGrid+bootstrap使用

本文章适用于使用jqGrid+bootstrap搭建的表格。

效果图如下：

需要引入的资源文件

• bootstrap.min.css
• ui.jqgrid-bootstrap-ui.css
• ui.jqgrid-bootstrap.css
• jquery.min.js
• bootstrap.min.js
• grid.locale-cn.js
• jquery.jqGrid.min.js

• user.js

  user.js内容如下:

$(function () { 
   
    $("#jqGrid").jqGrid({
        url: 'list',
        datatype: "json",
        styleUI: 'Bootstrap',//设置jqgrid的全局样式为bootstrap样式 
        colModel: [         
            { label: '用户名', name: 'username', width: 45, key: true },
            { label: '岗位', name: 'position', width: 75 },
            { label: '手机', name: 'mobile', width: 100 },
            { label: '邮箱', name: 'email', width: 90 },
            { label: '地址', name: 'address', width: 100 },
            { label: '操作', name: 'userId', width: 80, formatter: function(value, options, row){ 
   
                return "<a href='/crm/user/"+value+"'><i class='fa fa-search'></i>&nbsp;查看</a>&nbsp;&nbsp;" +
                        "<a href='/crm/user/"+value+"/edit'><i class='fa fa-edit'></i>&nbsp;编辑</a>";
            }},
        ],
        viewrecords: true,
        height: 400,
        rowNum: 10,
        rowList : [10,30,50],
        rownumbers: true, 
        rownumWidth: 25, 
        autowidth:true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page", 
            rows:"limit", 
            order: "order"
        },
        gridComplete:function(){ 
   
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
        }
    });
});

HTML内容如下:

<table id="jqGrid"></table>
<div id="jqGridPager"></div>