补充第一篇
第一篇: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>
效果