jqgrid表格控件

紫蓝青绿黄橙红

于 2020-11-19 13:40:09 发布

阅读量229

点赞数

文章标签： jqgrid

本文链接：https://blog.youkuaiyun.com/qq_37287018/article/details/109808853

版权

本文介绍了如何在项目中引入并使用jqGrid表格控件，包括在service层和controller层的配置与操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需引入

    <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>

一个例子

<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) {
                    $.ajaxFileUpload({
                        success: function () {
                            //上传成功 所作的事情
                            //刷新页面
                            $("#videoTable").trigger("reloadGrid");
                        }
                    });
                    return "hh";
                }
            },  //修改之后的额外操作
            {
                closeAfterAdd: true,//关闭添加框
                afterSubmit: function (data) {  //添加成功之后执行的内容
                    //1.数据入库    文件数据不对   文件没有上传
                    //2.文件异步上传   添加成功之后  上传
                    //3.修改文件路径   （id,要的的字段内容）
                    //id=  data.responseText
                    console.log(data.responseText + "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
                    $.ajaxFileUpload({
                        <%--url: "${path}/video/headUpload",--%>
                        <%--type: "post",--%>
                        <%--data: {"id": data.responseText},--%>
                        <%--fileElementId: "videoPath", //文件选择框的id属性，即<input type="file">的id--%>
                        success: function () {
                            //上传成功 所作的事情
                            //刷新页面
                            $("#videoTable").trigger("reloadGrid");
                        }
                    });
                    return "hello";
                }
            },  //添加之后的额外操作
            {}   //删除之后的额外操作
        );
    }

<body>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <form id="aa">
                    标题：<input type="text" name="title"><br>
                    描述：<input type="text" name="brief"><br>
                    视频：<input type="file" name="videoPath" id="vv"><br>
                    类别：<select id="cat" name="categoryId"></select>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="addVideo()">Save changes</button>
            </div>
            <div id="addOneClassOk" class="alert alert-success alert-dismissable"
                 style="display: none">添加成功
            </div>
        </div>
    </div>

</div>
<%--初始化一个面板--%>
<div class="panel panel-info">

    <%--面板头--%>
    <div class="panel panel-heading">
        <h2>视频信息</h2>
    </div>

    <%--选项卡--%>
    <div>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home">视频管理</a></li>
        </ul>
    </div>
    <br>

    <%--按钮组--%>
    <div>
        <button class="btn btn-info">导出视频</button>
        <button class="btn btn-success" data-toggle="modal" data-target="#myModal">添加</button>
    </div>
    <br>

    <%--表格--%>
    <table id="videoTable"/>

    <%--工具栏--%>
    <div id="videoPage"/>


</div>
</body>

service层

@Override
    public Map<String,Object> queryAllByLimit(int rows, int page) {
        int start = (page - 1) * rows;
        List<Emp> list = empDao.queryAllByLimit(start, rows);
        int i = getTotal();
        System.out.println(i);
        int pageCount = i % rows == 0 ? i / rows : i / rows + 1;
        /*
         * 1. 计算起始下标
         * 2. 计算总页数
         *
         * page: 当前页
         * rows: 查询到的数据
         * total: 总页数
         * records: 总条数
         * */
        Map<String, Object> map = new HashMap<>();
        map.put("page", page);
        map.put("rows", list);
        map.put("records", i);
        map.put("total", pageCount);

        return map;
    }

controller层

	@RequestMapping("fenye")
    public Map<String ,Object> fenye(int rows, int page){
        return this.empService.queryAllByLimit(rows, page);
    }

    @RequestMapping("edit")
    @ResponseBody
    public String edit(Emp emp, String oper, String[] id) {
        String uid = null;
        if ("add".equals(oper)) {
            System.out.println("添加数据");
            Emp insert = empService.insert(emp);
            uid = insert.getId();
        } else if ("edit".equals(oper)) {
            System.out.println("修改数据");
            Emp update1 = empService.update(emp);

            uid = update1.getId();
        } else if ("del".equals(oper)) {
            empService.deleteById(emp.getId());
            System.out.println("删除数据");
        }
        return uid;
    }