如何将属性绑定到 jqgrid 中的文本框控件

Question

我想将文本框控件与对象的属性绑定。 如下代码所示，除了文本框控件没有绑定“名称，索引”中提到的关联属性之外，它都可以正常工作。

下面是我的 jqgrid 代码：

   $('#g).jqGrid({
        ajaxGridOptions: {
            error: function () {
                $('#g')[0].grid.hDiv.loading = false;
                alert('An error has occurred.');
            }
        },
        url: '@Url.Action("Getvalues", "cntrollName")/' + 0,
        postData: { ID: rowID },
        datatype: 'json',
        jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'ID' ,''},
        mtype: 'GET',
        colNames: ['GrdID', Name],
        colModel: [
            { name: ID, index: ID, hidden: true },
            { name: 'FullName', index: 'FullName', width: 150 },
            {
              name: 'txtVAlue', index: txtVAlue, width: 40, align: 'center',  formatter: function (cellValue, option) {
                        return '<input type="text" name="txtBox" id="txt_' +  option.rowId + '"  />';
                    }
                }],

        pager: $('#g),
        sortname: ID,
        rowNum: 10,
        width: '525',
        height: '100%',
        viewrecords: true,
        beforeSelectRow: function (rowid, e) {
                               return true;
        },
        sortorder: 'desc'
    }).navGrid('#g, { edit: false, add: false, del: false, search: false, refresh: false });

请建议我如何将文本框与字段值绑定。 还请建议我，是否可以更改 jqgrid 的颜色和字体大小。

谢谢

Answer 1

txtVAlue 列的格式化程序不使用cellValue。要修复格式化程序的代码，您可以使用类似

{
    name: 'txtVAlue',
    width: 40,
    align: 'center',
    formatter: function (cellValue, option) {
        return '<input type="text" size="7" name="txtBox" id="txt_' + option.rowId +
            '" value="' + cellValue +'"/>';
    }
}

在正确创建<input> 元素之后，您可能应该定义保存输入更改的事件句柄。例如，您可以在 loadComplete 回调中进行绑定。此外，您应该考虑实现onSortCol 回调。它将被调用 before 网格将被排序（如果用户单击列标题）。

另外你应该

• 包括对所有'#g 关闭'（将其替换为'#g'）。 Name、ID 和 rowID 也应该包含在 ' 中（或者应该声明和分配变量）。
• 你必须使用pager的另一个选择器作为网格的ID。例如pager: '#g_pager。带有id="g_pager" 的 div 应该放在某个地方。
• 我建议您使用gridview: true 和autoencode: true 选项。