jqGrid+bootstrap使用[通俗易懂]

(7) 2023-04-07 18:12

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说jqGrid+bootstrap使用[通俗易懂],希望能够帮助你!!!。

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

效果图如下:
jqGrid+bootstrap使用[通俗易懂]_https://bianchenghao6.com/blog__第1张


需要引入的资源文件

  • 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>

上一篇

已是最后文章

下一篇

已是最新文章

发表回复