bootstrap的插件jqgrid补充，增删改查分页操作

补充第一篇
第一篇：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>
效果
bootstrap的插件jqgrid补充，增删改查分页操作

おすすめ
