jqgrid表格控件

1. 需引入

    <link rel="stylesheet" href="${path}/style/bootstrap/jqgrid/css/css/hot-sneaks/jquery-ui-1.8.16.custom.css">
    <link rel="stylesheet" href="${path}/style/bootstrap/jqgrid/boot/css/trirand/ui.jqgrid-bootstrap.css">
    <script src="${path}/style/bootstrap/jqgrid/js/i18n/grid.locale-cn.js"></script>
    <script src="${path}/style/bootstrap/jqgrid/boot/js/trirand/jquery.jqGrid.min.js"></script>
    <script src="${path}/style/bootstrap/js/ajaxfileupload.js"></script>

2. 一个例子

<script>
    $(function (){
   
        pageInit();
    })

    function pageInit() {
   
        $("#videoTable").jqGrid({
   
            url: "${path}/emp/fenye",   //page,rows   //返回数据：total总页数 records总条数  page当前页  row数据
            editurl: "${path}/emp/edit",
            datatype: "json",
            cellEdit:true,
            rowNum: 2,
            rowList: [2, 10, 20, 30],
            pager: '#videoPage',
            styleUI: "Bootstrap",
            autowidth: true,
            reloadAfterSubmit: true,
            height: "auto",
            viewrecords: true,  //是否显示总条数
            colNames: ['ID', '员工名', '工资', '年龄', '部门'],
            colModel: [
                {
   name: 'id', index: 'id', width: 55},
                {
   name: 'empname', editable: true, index: 'invdate', width: 90},
                {
   name: 'salary', editable: true, index: 'invdate', width: 90},
                {
   
                    name: 'age', editable: false, index: 'name asc, invdate', width: 100, align: "center"
                },
                {
   
                    name: 'deptname',editable: true, index: 'amount', width: 80, align: "right"
                }
            ]
        });
        //编辑工具栏
        //编辑工具栏
        $("#videoTable").jqGrid('navGrid', '#videoPage',
            {
   edit: true, add: true, del: true, addtext: "添加"},
            {
   
                closeAfterEdit: true,
                reloadAfterSubmit: false,
                afterSubmit: function (data