Welcome 微信登录

首页 / 脚本样式 / JavaScript / jquery增加时编辑jqGrid(实例代码)

复制代码 代码如下:
function showTestSubjectGrid() {
    $("#testSubjectGrid").jqGrid({
        url: "",
        datatype: "json",
        height: 215,
        width: 480,
        caption: "测试科目",
        autoheight: true,
        autowidth: true,
        scrollrows: false, // 是否显示行滚动条
        multiselect: true, // 是否显示复选框
        hidegrid: false, //取消Grid的收缩
        postData: {
            strJson: testsubjectData
        },
        colNames: ["", "测试科目", "开始时间", "结束时间", "场次", ],
        colModel: [
        {
            name: "data",
            index: "data",
            hidden: true
        }, {
            name: "display_content",
            index: "display_content",
            width: 100,
            editable: true,
            align: "left"
        }, {
            name: "exam_startTime",
            index: "exam_startTime",
            width: 110,
            editable: true,
            align: "center"
        }, {
            name: "exam_EndTime",
            index: "exam_EndTime",
            width: 110,
            editable: true,
            align: "center"
        }, {
            name: "exam_turn",
            index: "exam_turn",
            width: 110,
            editable: true,
            align: "center"
        }],
        jsonReader: {
            root: "rows",
            repeatitems: false,
            id: "data"
        },
        gridComplete: function () {
            var testIds = $("#testSubjectGrid").jqGrid("getDataIDs");
            for (var i = 0; i < testIds.length; i++) {
                var cid = testIds[i];
                var exam_begintime = "<input type="text" name="exam_begintime_" + testIds[i] + "" id="exam_begintime_" + testIds[i] + ""/>";
                var exam_endtime = "<input type="text" name="exam_endtime_" + testIds[i] + "" id="exam_endtime_" + testIds[i] + ""/>";
                var exam_turn = "<input type="text" name="exam_turn_" + testIds[i] + "" id="exam_turn_" + testIds[i] + ""/>";
                jQuery("#testSubjectGrid").jqGrid("setRowData", cid, { exam_startTime: exam_begintime });
                jQuery("#testSubjectGrid").jqGrid("setRowData", cid, { exam_EndTime: exam_endtime });
                jQuery("#testSubjectGrid").jqGrid("setRowData", cid, { exam_turn: exam_turn });
                $("#exam_begintime_" + testIds[i]).datepicker({
                    showOn: "button",
                    buttonText: "选择"
                });
                $("#exam_endtime_" + testIds[i]).datepicker({
                    showOn: "button",
                    buttonText: "选择"
                });

            }
        }
    });
};