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

以下是页面的代码

<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);        }

下面是效果图：

1.

2.

3.

点击下载源码（需要5点资源分）