补充第一篇
第一篇：https://blog.csdn.net/weixin_42835381/article/details/108404843
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- bootstrap的核心css --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" > <!-- jqgrid的核心css--> <link rel="stylesheet" href="../jqgrid/ui.jqgrid-bootstrap.css"> <!-- jquery核心js--> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- jqgrid核心js--> <script src="../jqgrid/jquery.jqGrid.min.js"></script> <!-- jqgrid国际化js--> <script src="../jqgrid/grid.locale-cn.js"></script> <!-- bootstrap核心js--> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(function () { //初始化表格 jqgrid的属性使用方式:将属性以对象方式作为jqgrid的参数进行传递即可，对象中属性名：属性值 $("#userList").jqGrid( { styleUI:"Bootstrap",//用来指定jqgrid的样式 url:"../json/list.json",//用来远程获取数据地址，json格式类型 datatype:"json",//用来指定服务返回的数据类型 默认是：xml 修改为:json mtype:"post",//用来指定请求方式，默认是GRT方式（get方式默认是走地址栏） colNames:["编号","姓名","年龄","性别","生日","部门"],//用来指定表格中标题列的名称， colname和colmodel（列属性）必须成对出现，长度一致 colModel:[ {name:"id",align:"center",editable:true}, {name:"name",editable:true}, {name:"age", formatter:function (cellvalue,options,rowObject) {//formatter用来对数据进行二次渲染，起到拦截作用 if(cellvalue>23){ return "<font color='red'>"+cellvalue+"</font>"+" √" } return cellvalue;//原样渲染，cellvalue是原来的值 }, editable:true, }, {name:"sex", editable: true, edittype: "select", editoptions:{//本地写死的数据 // multiple:true,//下拉列表多选 value:"男:男;女:女", } }, {name:"bir", editable:true,}, {name:"dept", formatter:function (cellvalue,options,rowObject) { return rowObject.dept.name; }, editable:true, edittype:"select",//在编辑表单中渲染的格式 editoptions: {//远程服务器数据 dataUrl:"", //从远端服务器获取数据，返回一段html字符串<select><option value=""></option>*n</select> } } ], pager:"#pager",//用来定义分页工具栏 用路径来处理分页的请求 viewrecords:true,//展示总条数 rowNum:5,//每页显示条数，默认20 rowList:[1,5,10,15],//定义一个下拉列表，可选页面展示多少条数据 sortname:"id",//基于某个列排序,接口的参数名是sidx caption:"展示列表",//标题 hidegrid: true,//金庸标题下展示隐藏的表格的按钮 autowidth: true,//自适应父容器 height:400, editurl: "",//编辑时的url设置 ,提交到后台 gridComplete: function () {//事件使用 页面刷新，出现读取中。。字样 }, onCellSelect:function (rowid,iCol,cellcontent,e) {//点击单元格 console.log("11111"); console.log(rowis); console.log(iCol); } }).navGrid("#pager");//编辑功能 a:将快速编辑按钮放入哪个位置 b:展示编辑配置的对象 c:代表对编辑面板的配置 // d：添加面板的配置 e:删除面板配置 f：搜索面板的配置 g:刷新的配置 //配合editable属性,在字段里添加 }); </script> </head> <body> <table id="userList"> </table> <!--分页展示--> <div id="pager"></div> </body> </html>效果
