jqGrid+bootstrap使用

来源：互联网发布：office for mac破解器编辑：程序博客网时间：2024/06/05 17:51

本文章适用于使用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>

0 0