jqGrid edittype选择css类

时间:2012-02-13 14:03:48

标签: css select jqgrid

如何使用edittype:select?为jqgrid创建的元素设置css类?这是我的代码:

$(window).load(function () {
            GetProjects();
        });

        function GetProjects() {
            jQuery("#tbl1").jqGrid({
                url: 'myurl',
                datatype: "json",
                mtype: 'POST',
                colNames: ['Project', 'Module', 'Description'],
                colModel: [
        { name: 'Project', index: 'Name', width: 90, editable: true, edittype: 'select', editoptions: { value: GetProjectOptions()} },
        { name: 'Name', index: 'Project.Name', width: 55, editable: true },
        { name: 'Description', index: 'Description', width: 90, editable: true }
    ],
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#nav1',
                sortname: 'Project.Name',
                viewrecords: true,
                sortorder: "desc",
                caption: "DDS Project Modules",
                jsonReader: {
                    repeatitems: false,
                    root: function (obj) { return obj; }
                },
                width: '500',
                loadonce: true,
                hidegrid: false,
                editurl: 'myurl'
            });
            jQuery("#tbl1").jqGrid('navGrid', '#nav1', { edit: false, add: false, del: false });
        }

        function AddRow() {
            jQuery("#tbl1").jqGrid('editGridRow', "new", { reloadAfterSubmit: false, closeAfterAdd: true });
        }

我尝试过使用类:colModel中的'cssClass',但是没有用。 以下是html的创建方式:

<select name="Project" class="FormElement" id="Project" role="select" size="1">

有什么建议吗?提前谢谢!

1 个答案:

答案 0 :(得分:3)

您可以定义editoptionsdataInit方法。例如,您可以尝试以下代码

editoptions: {
    value: GetProjectOptions(),
    dataInit: function (elem) {
        $(elem).addClass('ui-state-highlight');
    }
}

结果如下:

enter image description here