组件表格-jqGrid

Posted 2023-02-26 code_____monkey

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了组件表格-jqGrid相关的知识，希望对你有一定的参考价值。

bootstrap.min.css Bootstrap v3.3.7
bootstrap.min.js Bootstrap v3.3.7

jquery.min.js jQuery v2.1.4

jquery.jqGrid.min.js
grid.locale-cn.js

ui.jqgrid-bootstrap.css
ui.jqgrid-bootstrap-ui.css

注意：
bootstrap.min.css 中使用了Bootstrap 字体图标(Glyphicons)，要引入 ../fonts ,需要自行下载放到指定路径下

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.eot
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.eot?#iefix
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.woff2
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.woff
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.ttf
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular

html 页面设置
<div class="jqGrid_wrapper">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>

function queryUserJqGrid()
let page ='pageSize': 2,'pageNum': 1, 'data':
$.jgrid.defaults.styleUI = "Bootstrap";
           //初始化右键菜单
           $("#jqGrid").jqGrid(
               url: httpUrl+"/api/manage/user/page",
               datatype : "json",
               ajaxGridOptions:
           contentType: "application/json",
       ,//post请求需要加
               mtype: "POST",//post请求需要加
               postData: page,
       serializeGridData: function(postData)
       return JSON.stringify(postData);
       ,//post请求需要加

               colNames : ["用户ID", "用户名称","组织编码","组织名称", "创建时间", "状态", "操作" ],
               colModel : [
                   name : "id",
                   index : "id",
                   width : 50,
               ,
                   name : "userName",
                   index : "userName",
                   width : 50,
               ,
                   name : "organizationId",
                   index : "organizationId",
                   width : 80
               ,
                   name : "organizationName",
                   index : "organizationName",
                   width : 80
               ,
                   name : "createTime",
                   index : "createTime",
                   width : 80
               ,
                   name : "status",
                   index : "status",
                   width : 50,
                   formatter:function(cellvalue, options, rowObject)

               ,
                   name : "id",
                   index : "id",
                   width : 50,
                   formatter:function(cellvalue, options, rowObject)
                   return '<a id="table_'+rowObject.code+'" href="javascript:tableToEdit(\\''+rowObject.code+'\\');" isOpen="'+rowObject.isOpen+'" code="'+rowObject.code+'" sortBy="'+rowObject.sortBy+'" name="'+rowObject.name+'" catalogCode="'+rowObject.catalogCode+'" tableName="'+rowObject.tableName+'" showType="'+rowObject.showType+'" isShow="'+rowObject.isShow+'">编辑</a>'
                       +'<a href="javascript:;" style="margin-left:10px" οnclick=deleteRow("'
                       +rowObject.code
                       + '","'+rowObject.name
                       + '","'+rowObject.catalogCode
                       +'")>删除</a>';

               ],

           jsonReader:
                   root: "data.list",     // 数据模型
                   page: "data.pageNum",   // json中代表当前页码
                   total: "data.pages",       // json中代表页码总数
                   records: "data.total",   // json中代表数据总行数
                   //rows:"pageSize",
           repeatitems : false
               ,
               prmNames :
                   page:"pageNum",
                   rows:"pageSize",
       ,
           pager : "#jqGridPager",
               rowList : [ 10, 20, 30 ],
               rowNum : 2,
               rownumbers: true,
               viewrecords : true,显示总记录数
               //multiselect: false, //可多选，出现多选框
//multiselectWidth: 25, //设置多选列宽度
               autowidth : true,//自动匹配宽度
               shrinkToFit : true,//当初始化列宽度时候的计算类型,true，则按比例初始化列宽度,false，则列宽度使用colModel指定的宽度
               //height : $(window).height() - 160,
               hidegrid : false,
               refresh : true,
               height: 'auto'
           ).navGrid('#jqGridPager',edit:true,add:true,del:true,search:true,refresh:true);

function query()
var metatableVo = $('#searchForm').serializeJson();
$("#table_list").jqGrid('clearGridData'); //清空表格
$("#table_list").jqGrid('setGridParam', // 重新加载数据
url: httpUrl+'/matedata/metadata/metaTables/page',
datatype : "json",
ajaxGridOptions:
contentType: "application/json",
,//post请求需要加
mtype: "POST",//post请求需要加
postData:'data':metatableVo,
serializeGridData: function(postData)
return JSON.stringify(postData);
,//post请求需要加
prmNames :
page:"pageNum",
rows:"pageSize",
,
).trigger("reloadGrid");