Jqgrid - 对行级数据进行分组 [英] Jqgrid - grouping row level data

问题描述

使用 jqgrid，是否可以将行级数据分组为附加图像中的?基本上我想将特定行的数据从某些列开始拆分为多行..

例子

解决方案

我建议你使用cellattr在一些单元格上设置rowspan属性或者设置style="display:none" 隐藏另一个不需要的单元格.这个想法与 )

网格的问题在于另一个 jqGrid 功能，如排序、分页、悬停和选择.一些功能可以通过额外的努力实现，但另一种更难实现.

我在演示中使用的代码如下:

var mydata = [{ id:1"，国家:美国"，州:德克萨斯"，城市:休斯顿"，景点:NASA"，邮编:77058"，属性:{国家:{rowspan:5"}，状态:{rowspan:5"}}}，{ id:2"，国家:美国"，州:德克萨斯"，城市:奥斯汀"，景点:第六街"，邮编:78704"，属性:{国家:{显示:无"}, 状态: {display: "none"}} },{ id:3"，国家:美国"，州:德克萨斯"，城市:阿林顿"，景点:牛仔体育场"，邮编:76011"，属性:{国家:{显示:无"}, 状态: {display: "none"}} },{ id:4"，国家:美国"，州:德克萨斯"，城市:普莱诺"，景点:XYZ 地点"，邮编:54643"，属性:{国家:{显示:无"}, 状态: {display: "none"}} },{ id:5"，国家:美国"，州:德克萨斯"，城市:达拉斯"，景点:留尼汪塔"，邮编:12323"，属性:{国家:{显示:无"}, 状态: {display: "none"}} },{ id:6"​​，国家:美国"，州:加利福尼亚"，城市:洛杉矶"，景点:好莱坞"，邮编:65456"，属性:{国家:{rowspan:4"}, 状态: {rowspan: "4"}} },{ id:7"，国家:美国"，州:加利福尼亚"，城市:旧金山"，景点:金门大桥"，邮编:94129"，属性:{国家:{显示:无"}, 状态: {display: "none"}} },{ id:8"，国家:美国"，州:加利福尼亚"，城市:圣地亚哥"，景点:看世界"，邮编:56653"，属性:{国家:{显示:无"}, 状态: {display: "none"}} },{ id:9"，国家:美国"，州:加利福尼亚"，城市:阿纳海姆"，景点:迪士尼世界"，邮编:92802"，属性:{国家:{显示:无"}，状态:{显示:无"}}}],arrtSetting = 函数 (rowId, val, rawObject, cm) {var attr = rawObject.attr[cm.name]，结果；如果(attr.rowspan){结果 = '行跨度=' + '"' + attr.rowspan + '"';} else if (attr.display) {结果 = ' style="display:' + attr.display + '"';}返回结果；};$("#list").jqGrid({数据类型:'本地'，数据:我的数据，colNames: ['Country', 'State', 'City', 'Attraction', 'Zip code'],col型号:[{名称:'国家'，宽度:70，对齐:'中心'，cellattr:arrtSetting }，{ 名称:'state'，宽度:80，对齐:'center'，cellattr:arrtSetting }，{名称:'城市'，宽度:90}，{名称:'吸引力'，宽度:120}，{名称:'zip'，索引:'税'，宽度:60，对齐:'right'}],cmTemplate: {sortable: false},行数:100，网格视图:是的，悬停:假，自动编码:真，忽略大小写:真，观看记录:真实，高度:'100%'，caption: '具有 rowSpan 属性的网格',beforeSelectRow: 函数 () {返回假；}});

我在上面的代码中使用了附加的attr 属性与输入数据一起放置.这只是一个例子.我想让 cellattr 函数的实现更简单.您可以使用相同的想法并将 cellattr 所需的信息以任何其他格式放置.

With jqgrid, is it possible to group the row level data as in the attached image? Basically I wanted to split the data for a particular row into multiple rows from certain columns onwards..

Example

解决方案

I suggest you to use cellattr to set rowspan attribute on some cells or set style="display:none" to hide another unneeded cells. The idea is the same as with colspan from the answer.

As the result you can create the following grid (see the demo)

or another one (see another demo)

The problem with the grids is in another jqGrid features like sorting, paging, hovering and selection. Some from the features one can implement with additional efforts, but another one are more difficult to implement.

The code which I used in the demo is the following:

var mydata = [
        { id: "1", country: "USA", state: "Texas",      city: "Houston",       attraction: "NASA",               zip: "77058", attr: {country: {rowspan: "5"},    state: {rowspan: "5"}} },
        { id: "2", country: "USA", state: "Texas",      city: "Austin",        attraction: "6th street",         zip: "78704", attr: {country: {display: "none"}, state: {display: "none"}} },
        { id: "3", country: "USA", state: "Texas",      city: "Arlinton",      attraction: "Cowboys Stadium",    zip: "76011", attr: {country: {display: "none"}, state: {display: "none"}} },
        { id: "4", country: "USA", state: "Texas",      city: "Plano",         attraction: "XYZ place",          zip: "54643", attr: {country: {display: "none"}, state: {display: "none"}} },
        { id: "5", country: "USA", state: "Texas",      city: "Dallas",        attraction: "Reunion tower",      zip: "12323", attr: {country: {display: "none"}, state: {display: "none"}} },
        { id: "6", country: "USA", state: "California", city: "Los Angeles",   attraction: "Hollywood",          zip: "65456", attr: {country: {rowspan: "4"},    state: {rowspan: "4"}} },
        { id: "7", country: "USA", state: "California", city: "San Francisco", attraction: "Golden Gate bridge", zip: "94129", attr: {country: {display: "none"}, state: {display: "none"}} },
        { id: "8", country: "USA", state: "California", city: "San Diego",     attraction: "See world",          zip: "56653", attr: {country: {display: "none"}, state: {display: "none"}} },
        { id: "9", country: "USA", state: "California", city: "Anaheim",       attraction: "Disneyworld",        zip: "92802", attr: {country: {display: "none"}, state: {display: "none"}} }
    ],
    arrtSetting = function (rowId, val, rawObject, cm) {
        var attr = rawObject.attr[cm.name], result;
        if (attr.rowspan) {
            result = ' rowspan=' + '"' + attr.rowspan + '"';
        } else if (attr.display) {
            result = ' style="display:' + attr.display + '"';
        }
        return result;
    };

$("#list").jqGrid({
    datatype: 'local',
    data: mydata,
    colNames: ['Country', 'State', 'City', 'Attraction', 'Zip code'],
    colModel: [
        { name: 'country', width: 70, align: 'center', cellattr: arrtSetting },
        { name: 'state', width: 80, align: 'center', cellattr: arrtSetting },
        { name: 'city', width: 90 },
        { name: 'attraction', width: 120 },
        { name: 'zip', index: 'tax', width: 60, align: 'right' }
    ],
    cmTemplate: {sortable: false},
    rowNum: 100,
    gridview: true,
    hoverrows: false,
    autoencode: true,
    ignoreCase: true,
    viewrecords: true,
    height: '100%',
    caption: 'Grid with rowSpan attributes',
    beforeSelectRow: function () {
        return false;
    }
});

I used in the above code additional attr property placed together with the input data. It's just an example. I wanted to make the implementation of cellattr function more simple. You can use the same idea and to place the information needed for cellattr in any other format.

这篇关于Jqgrid - 对行级数据进行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！