将一个JQGrid的数据通过拖曳的方式将数据复制到JQGrid

本文链接：https://blog.youkuaiyun.com/showtime5156/article/details/6652079

本文介绍如何通过jQuery实现JQGrid中数据的拖曳复制功能。涉及前端代码实现，以及后台ASP.NET MVC返回符合JSON格式的数据。教程包含关键代码段和最终效果展示。

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

以下是页面的代码

<script type="text/javascript">
    $(function () {

        document.onselectstart = function () { return false; } //页面内容无法选择


        //全部的数据
        jQuery("#list1").jqGrid({
            url: 'Home/LoadAll',
            width: 440,
            mtype: "post",
            height: 700,
            datatype: "json",
            colNames: ['ID', '名称', '性别', '考试日期', '考场编号', '成绩'],
            colModel: [
            { name: 'ID', index: 'ID', width: 50 },
   		    { name: 'Name', index: 'Name', width: 90 },
   		    { name: 'Sex', index: 'Sex', width: 30 },
   		    { name: 'ExamDate', index: 'ExamDate', width: 90 },
   		    { name: 'ExamRoom', index: 'ExamRoom', width: 90 },
   		    { name: 'Sore', index: 'Sore', width: 90 }
   	    ],
            afterInsertRow: function (rowid, rowdata, rowelem) {
                $("#" + rowid).mousedown(function () {
                    var id = $(this).attr("id");
                    var row = jQuery("#list1").getRowData(id);
                    $("#aa").html("<table>" + $("#" + id).html() + "</table>");


                    $("body").mouseup(function () {
                        var MX = event.clientX;
                        var MY = event.clientY;
                        var listWidth = $("#list2").getGridParam("width");
                        var listHeight = $("#list2").getGridParam("height");
                        var XY = $("#list2").offset();
                        var X = XY.left;
                        var Y = XY.top;


                        if ((MX - X) <= listWidth && (MX - X) >= 0 && (MY - Y) <= listHeight && (MY - Y) >= 0) {
                            jQuery("#list2").addRowData("1", rowdata, "first");
                        }

                        listWidth = $("#list3").getGridParam("width");
                        listHeight = $("#list3").getGridParam("height");
                        XY = $("#list3").offset();
                        X = XY.left;
                        Y = XY.top;


                        if ((MX - X) <= listWidth && (MX - X) >= 0 && (MY - Y) <= listHeight && (MY - Y) >= 0) {
                            jQuery("#list3").addRowData("1", rowdata, "first");
                        }

                        $("#aa").text("");
                        $("body").unbind("mousemove");
                        $("body").unbind("mouseup");
                    })


                    $("body").mousemove(function () {
                        aa.style.pixelLeft = event.clientX - 20;
                        aa.style.pixelTop = event.clientY + 3;
                    })


                })
            },
            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                id: "0"
            },
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pager1',
            sortname: 'ID',
            viewrecords: true,
            sortorder: "desc",
            caption: "考试成绩"
        });
        jQuery("#list1").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false });





        //不合格的数据
        jQuery("#list2").jqGrid({
            url: 'Home/LoadFailed',
            width: 440,
            height: 300,
            datatype: "json",
            colNames: ['ID', '名称', '性别', '考试日期', '考场编号', '成绩'],
            colModel: [
   		    { name: 'ID', index: 'ID', width: 50 },
   		    { name: 'Name', index: 'Name', width: 90 },
   		    { name: 'Sex', index: 'Sex', width: 30 },
   		    { name: 'ExamDate', index: 'ExamDate', width: 90 },
   		    { name: 'ExamRoom', index: 'ExamRoom', width: 90 },
   		    { name: 'Sore', index: 'Sore', width: 90 }

   	    ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pager2',
            sortname: 'ID',
            viewrecords: true,
            sortorder: "desc",
            caption: "不合格成绩"
        });
        jQuery("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });




        //缺考的数据
        jQuery("#list3").jqGrid({
            url: 'Home/LoadAbsent',
            width: 440,
            height: 300,
            datatype: "json",
            colNames: ['ID', '名称', '性别', '考试日期', '考场编号', '成绩'],
            colModel: [
   		    { name: 'ID', index: 'ID', width: 50 },
   		    { name: 'Name', index: 'Name', width: 90 },
   		    { name: 'Sex', index: 'Sex', width: 30 },
   		    { name: 'ExamDate', index: 'ExamDate', width: 90 },
   		    { name: 'ExamRoom', index: 'ExamRoom', width: 90 },
   		    { name: 'Sore', index: 'Sore', width: 90 }

   	    ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pager3',
            sortname: 'ID',
            viewrecords: true,
            sortorder: "desc",
            caption: "缺考成绩"
        });
        jQuery("#list3").jqGrid('navGrid', '#pager3', { edit: false, add: false, del: false });

    })
</script>
<div style="float: left; width: 500;">
    <table id="list1">
    </table>
    <div id="pager1">
    </div>
</div>
<div style="width: 440; float: right">
    <div style="width: 100%">
        <table id="list2">
        </table>
        <div id="pager2">
        </div>
    </div>
    <div style="width: 100%">
        <table id="list3">
        </table>
        <div id="pager3">
        </div>
    </div>
</div>
<div id="aa" style="background: #aec3d6; position: absolute">
</div>

后台返回数据的代码（这端代码是asp.net mvc，可用其他语言,只要返回符合要求的json格式就行了）：

  [AcceptVerbs(HttpVerbs.Post)]
        public JsonResult LoadAll()
        {
            JQGrid jqData = new JQGrid();
            

            Object[] rows = new Object[100]; //存储全部数据   

            for (int i = 0; i < 100; i++)
            {

                string sex = null;
                if (i % 3 == 0)
                    sex = "女";
                else
                    sex = "男";

                rows[i] = (new { ID = i+1, Name = "考生" + i, Sex = sex, ExamDate = DateTime.Now.ToString(), ExamRoom = "考场" + i % 3, Sore = 88 + (i % 9).ToString() });
            }
            JQGridPage page = new JQGridPage(100, jqData.PageSite, jqData.CurrentPage);

            return this.Json(new { rows = rows, page = 1, total = 50, records = 100 }, JsonRequestBehavior.AllowGet);
        }