jqGrid (数据表格)

1.使用jqgrid数据表格

1). 环境搭建

官方下载: http://www.trirand.com/blog/

中文网下载: http://blog.mn886.net/jqGrid/

2). 如何使用

1.解压压缩包核心文件夹:  jqgrid2.页面中使用引入jqgrid中核心css引入jqgrid中国际化语言文件引入jqgrid中核心js文件 <link rel="stylesheet" href="${app}/boot/css/bootstrap.min.css"><%--引入jqgrid中主题css--%><link rel="stylesheet" href="${app}/boot/jqgrid/css/ui.jqgrid.css"><%--引入js文件--%><script src="${app}/boot/js/jquery-3.3.1.min.js"></script><script src="${app}/boot/js/bootstrap.min.js"></script><script src="${app}/boot/jqgrid/js/i18n/grid.locale-cn.js"></script><script src="${app}/boot/jqgrid/js/jquery.jqGrid.src.js"></script>3.创建jqgrida.页面中含有<table id="list"></table>b.生成数据表格//初始化表格$("#list").jqGrid({});

2.表格初始化参数使用

1.表格的初始化参数的使用$("#list").jqGrid({   //注意:用来书写初始化参数url:"${app}/users.json",//用来加载远程数据datatype:"json",  //用来指定返回数据类型cellEdit:true,//开启单元格编辑autowidth:true,//自适应父容器colNames:["ID","姓名","年龄","生日"],   //表格标题});2.常用初始化参数
/*url           : 用来指定服务端的url地址 或  用来获取远程数据的urldatatype : 用来指定从服务器端返回的数据类型 (默认是:"xml") 使用时:"json"    colNames   : 用来指定表格列的名称 如 ["id","姓名".....]colModel : 用来指定表格列的名称所对应的数据 注意:colNames和colModel长度必须一致使用方式 colModel:[{name:"id".....},{},]pager        : 用来指定分页工具栏标签的id  注意:分页工具栏可以放在任意位置使用方式: <div id="aa"></div>    grid中设置:pager:"#aa"rowNum       : 用来指定每页显示记录数 默认是:20 后台可以使用:rows变量进行参数接收使用注意: a.建议最好是rowList中一个子元素b.后台可以使用page变量接收当前页rowList        : 用来指定下拉列表中每页显示条数  注意:是一个数组viewrecords : 用来显示总记录数使用注意: a.一旦加入分页工具栏之后后台响应json数据格式变化为:{"rows":[当前页结果],"page":"当前页","total":"总页数","records":"总条数"}sortname   : 用来指定使用哪个列作为排序列  注意:后台使用sidx接收排序列结果      caption     : 用来指定表格的标题autowidth  : 用来自适应父容器cellEdit  : 用来开启单元格的点击修改操作 注意:必须配合colModel中editable属性为true才生效editurl      : 用来指定编辑(增删改)时的url使用注意: 当执行grid中增删改时全部使用当前指定的url如果是保存 会传递一个参数名为oper值:add如果是修改 会传递一个参数名为oper值:edit如果是删除 会传递一个参数名为oper值:delhiddengrid : 用来控制表格是否默认打开hidegrid  : 用来控制在使用标题情况下是否显示折叠按钮multiselect : 用来控制是否显示checkboxpage        : 用来指定初始化的页码rownumbers  : 用来显示指定行的行号toolbar     : 用来指定表格的工具栏 使用方式:  ['true','both']使用注意:a.如果只有一个工具栏则为 “t_”+表格id b.如果为both 上面工具栏id为“t_”+表格id；下面则为 “tb_”+表格id；
*/

3.表格的colModel参数使用

1.表格的colModel属性的使用
$("#list").jqGrid({ colModel:[{name:"id",align:"center",....//用来书写colModel属性},]
});2.常用属性如下://name          : 用来获取json中指定字段作为该列的数据展示//classes       : 用来给当前列设置样式 多个样式空格分开//align            : 用来设置该列值的对齐方式//editable        : 用来控制当前单元格是否可以点击编辑 必须配合初始化属性cellEdit:true使用//edittype      : 用来指定编辑时的类型 /*支持类型(text, textarea, select, checkbox, password, button, image and file.)*///editoptions   : 用来指定编辑类型为select时,select标签的数据获取方式 /*editoptions:{value:"1:One;2:Two"}//本地数据editoptions:{dataUrl:"数据地址"}//加载远程数据 要求返回的结果必须是准备好select的html*///width            : 用来指定列的宽度//fixed           : 用来指定当表格自动适应时,宽度固定//formatter      : 用来指定对表格列二次渲染值为function(value,options,row){return"渲染结果"}//hidden        : 用来指定表格在初始化时不显示哪个列//index           : 向后台传递的参数(暂时没有实现)//resizable       : 用来修改当前列是否可以修改大小//search       : 用来指定该列是否可以参与搜索//sortable      : 用来指定该列是否可以参与排序//surl          : 当该列为搜索列时使用指定的url请求数据(如果不指定默认使用grid的url属性的值)

4.事件使用方式

1.事件的使用方式$("#emplist").jqGrid({全局初始化属性:ondblClickRow:function(){}//事件......})

5.方法调用

1.方法调用方式$("#emplist").jqGrid('方法名',参数列表....);

jqGrid (数据表格)相关推荐

JQGRID 数据表格
JQGRID 数据表格引言概念:数据表格渲染数据第一个JQGRID程序环境搭建1.下载jqgrid的相关文件 zip解压缩2.把对应的jqgrid相关的js文件 css文件引入项目中3.在网 ...
jQuery EasyUI API 中文文档 - DataGrid 数据表格
扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagin ...
Plotly可视化输出数据表格（table）:简单表格、添加链接的表格
Plotly可视化输出数据表格(table):简单表格.添加链接的表格 # 可视化输出简单表格 import plotly as py import plotly.figure_factory as ...
在layui中使用ajax传值给后台,浅谈layui 数据表格前后台传值的问题
1.1查询 layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : ...
TP5.0 PHPExcel 数据表格导出导入(引)
TP5.0 PHPExcel 数据表格导出导入(引) 今天看的是PHPExcel这个扩展库,Comporse 下载不下来,最后只能自己去github里面手动下载,但有一个问题就是下载下来的PHPExc ...
解决Layui数据表格无数据最后列被顶出去的问题
解决Layui数据表格无数据最后列被顶出去的问题参考文章: (1)解决Layui数据表格无数据最后列被顶出去的问题 (2)https://www.cnblogs.com/Caoxdong/p/963 ...
datagrid数据表格当数据为0的时候页面不显示数据
如下图: datagrid数据表格当数据为0的时候页面不显示数据,为空的表格数据全是0,但是页面无法显示传递的json数据也是没问题的: 所以实在想不通,为什么easyUI datagrid 不显示 ...
jquery easy ui 1.3.4 数据表格(DataGrid)（8）
8.1.创建DataGrid html代码 <table id="dg"></table> $("#dg").datagrid({ // ...
数据表格+弹出层的综合案例
json准备 persons.json {"code": 0,"msg": "","count": 101," ...

jqGrid (数据表格)

jqGrid (数据表格)

1.使用jqgrid数据表格

1). 环境搭建

2). 如何使用

2.表格初始化参数使用

3.表格的colModel参数使用

4.事件使用方式

5.方法调用

jqGrid (数据表格)相关推荐

最新文章

热门文章