jqgrid自定义编辑问题答案

【问题标题】：jqgrid custom edit issuejqgrid自定义编辑问题
【发布时间】：2012-12-05 06:02:59
【问题描述】：

http://www.trirand.com/blog/jqgrid/jqgrid.html

我有一个 5 列的 jqgrid，第一列作为操作，在第一列中我有 3 个按钮作为编辑、保存、取消。当我将数据列表绑定到 jqgrid 时，我有 2 个问题......首先列中的数据被放错了位置，因为第一列有 3 个按钮，列表列中的数据是第一个绑定的具有作为列名的操作的网格列和所有其他列数据都放错了位置

当我单击操作列中的编辑按钮时，网格中的所有行都支持包括操作列在内的内联编辑功能，因此没有单击保存的选项。

我的 jQuery 代码：

        <script type="text/javascript">
        $(function () {
        var lastsel;

        jQuery("#list").jqGrid({
            url: '/Home/GetStudents/',
            datatype: 'json',

            mtype: 'POST',
            colNames: ['Actions', 'StudentID', 'FirstName', 'LastName', 'Email'],
            colModel: [
      { name: 'act', index: 'act', width: 75, sortable: false },
      { name: 'StudentID', sortable: false, key: true },
      { name: 'FirstName', key: true },
      { name: 'LastName', sortable: false, key: true },
      { name: 'Email', width: 200, sortable: false, key: true}],
            cmTemplate: { align: 'center', editable: true },
            pager: '#pager',
            width: 750,
            rowNum: 15,
            rowList: [5, 10, 20, 50],
            sortname: 'StudentID',
            sortorder: "asc",
            viewrecords: true,
            caption: ' My First JQgrid',

            gridComplete: function () {
                var ids = jQuery("#list").jqGrid('getDataIDs');

                for (var i = 0; i < ids.length; i++) {
                    var cl = ids[i];
                    be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#list').editRow('" + cl + "');\"  />";
                    se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list').saveRow('" + cl + "');\"  />";
                    ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list').restoreRow('" + cl + "');\" />";
                    jQuery("#list").jqGrid('setRowData', ids[i], { act: be + se + ce });
                }
            },

            editurl: '/Home/About/',
            //                data: { get_param: selectedDescription },
            caption: "jQgrid Sample"

        });

        jQuery("#list").jqGrid('navGrid', "#prowed2", { edit: false, add: false, del: false });
    });

</script>

【问题讨论】：

很难理解你有什么“错位”。图片会很有帮助。演示代码来自 very old 版本的 jqGrid。使用formatter: "actions"不是更好吗？从 jqGrid 3.8.2 开始，您可以使用格式化程序（请参阅here）。您还应该 * 始终* 使用 gridview: true 来提高网格的性能（有关详细信息，请参阅 here）。
我添加了图像，我的意思是名称显示在 id 列中，lastname 显示在 firstname 列等...

标签： jquery asp.net-mvc jqgrid

【解决方案1】：

您使用cmTemplate: { editable: true }，因此您应该在act' 列的定义中添加editable: true 属性。此外，如果您在colModel 的开头添加新列，则必须调整从服务器返回的 JSON 中元素的位置。此外，它可以是只有一个具有key: true 属性的列。这意味着行的id属性的值（<tr>的id）将从列中获取。如果您使用该属性，来自 JSON 输入的 id 属性将被忽略。您只能在包含唯一值的列中使用key: true。

【讨论】：