将服务器数据加载到jqgrid并隐藏记录ID

时间:2013-09-18 08:45:28

标签: jquery json jqgrid

我想知道如何在我用服务器加载数据之后确保id列隐藏在网格中,但是当选择行中的任何可见单元格时,id值应该可用。

来自服务器的数据看起来像;

{ "rows": [  
[ "0007A53CEC393D2CC1257BE3002AAC36","Name1","Telephone1","Mobile1","Workplace1" ] ,
[ "0007A53CEC393D2CC1257BE3002AAC36","Name2","Telephone2","Mobile2","workplace2" ] 
]}

网格代码看起来像;

// Load the grid
$( "#contentTable" ).jqGrid( {
url: jsonURL,
datatype: 'json',
autowidth: true, 
height: 520,
colNames: options.selectedColumnNames,
colModel: options.selectedColumnModel,
loadonce: true,
rownumbers: true,
rownumWidth: 40,
gridview: true,
pager: '#pager',
viewrecords: true,
sortorder: "asc",
jsonReader : {
cell: "",
id: "0"
},
caption: options.viewTitle
});

列模型看起来像;

columnNames = ['ID', 'Namn','Telefon', 'Mobil', 'Arbetsplats'];
columnModel = [
        {name:'id',index:'name', width: 200},
        {name:'name',index:'name', width: 200},
    {name:'telephone',index:'telephone', width:100},
    {name:'mobile',index:'mobile', width:100},
    {name:'workplace',index:'workplace', width:200}     
];

我的问题是,有人可以帮我清除我应该怎样做以隐藏id列在网格中显示但我仍然希望能够在连续选择cel时获得id值吗?

2 个答案:

答案 0 :(得分:1)

我不确定我是否正确理解你的意思“在连续选择任何可见单元格时,应该可以使用id值”。我想你的意思是onSelectRow calback的第一个参数(idrowid)应该具有来自输入数据(0007A53CEC393D2CC1257BE3002AAC36)的值。

首先,拥有唯一 id值非常重要。您发布的数据包含两行,具有相同的id="0007A53CEC393D2CC1257BE3002AAC36"。我认为它只是剪切和粘贴错误,而您的真实数据包含真正唯一的ID值。

接下来,了解在大多数情况下根本不需要隐藏id列非常重要。 jqGrid 始终在网格的每一行(id元素)上分配<tr>属性。像onSelectRow这样的回调从id属性获取值,而不是从某个网格列获取。因此,数据行可以减少到

<tr id="0007A53CEC393D2CC1257BE3002AAC36">
    <td>Name1</td>
    <td>Telephone1</td>
    <td>Mobile1</td>
    <td>Workplace1</td>
</tr>

而不是

<tr id="0007A53CEC393D2CC1257BE3002AAC36">
    <td style="display:none">0007A53CEC393D2CC1257BE3002AAC36</td>
    <td>Name1</td>
    <td>Telephone1</td>
    <td>Mobile1</td>
    <td>Workplace1</td>
</tr>

对应隐藏的id列。

下一个评论。我不建议您在网格中指定index列。尤其是不同的 nameindex属性(例如网格中的name:'id',index:'name')的使用可能是错误的起源。指向另一列的index名称的name值将起作用,但我不确定它是否只是剪切和粘贴错误。如果您使用loadonce: true,则indexname可能会导致colModel值出现问题。

如果您仍然需要隐藏id列,可以使用以下colModel

colModel: [
    {name: 'id', key: true, hidden: true, width: 200},
    {name: 'name', width: 200},
    {name: 'telephone', width: 100},
    {name: 'mobile', width: 100},
    {name: 'workplace', width: 200}
],
jsonReader: {
    cell: "",
    id: "0"
}

就像the demo一样。或者你可以使用

colModel: [
    {name: 'name', width: 200, jsonmap: "1"},
    {name: 'telephone', width: 100, jsonmap: "2"},
    {name: 'mobile', width: 100, jsonmap: "3"},
    {name: 'workplace', width: 200, jsonmap: "4"}
],
jsonReader: {
    repeatitems: false,
    id: function () {
        return function (item) {
            return item[0];
        };
    }
}

并且没有隐藏的id,只有id属性。请参阅another demo

答案 1 :(得分:0)

尝试:

$("#contentTable").jqGrid('hideCol','ID');