教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 jquery增加时编辑jqGrid(实例代码)

jquery增加时编辑jqGrid(实例代码)

发布时间:2014-05-02   编辑:jiaochengji.com
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: '选择'
                });

            }
        }
    });
};

您可能感兴趣的文章:
jqgrid 简单学习笔记
jquery增加时编辑jqGrid(实例代码)
一个关于jqGrid使用的小例子(行按钮)
Jqgrid设置全选(选择)及获取选择行的值示例代码
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
jqgrid 编辑添加功能详细解析
JqGrid web打印实现代码
给jqGrid数据行添加修改和删除操作链接(之一)
JQGrid的用法解析(列编辑,添加行,删除行)
jqGrid jQuery 表格插件测试代码

关键词: jquery  jqGrid   
[关闭]
~ ~