Question

我正在使用jqgrid和tableToGrid插件，但发现它对于一个大表来说相对较慢。所以我想使用jqgrid的data选项重写它，而不是使用原始的addRowData方法。但是，我找不到有关使用data选项指定行ID的任何参考。网格只是从1开始生成id，但我想在我的数据行中具体说明id。

我是否需要同时使用localReader才能使其正常工作？我们将欣赏一段代码示例。

这是我的网格声明。（从原始的平板电脑编辑）

jQuery(this).jqGrid(jQuery.extend({
        datatype: "local",
        data:data,          
        width: w,
        colNames: colNames,
        colModel: colModel,
        multiselect: selectMultiple
        //inputName: inputName,
        //inputValueCol: imputName != null ? "__selection__" : null
    }, options || {}));

Answer 1

好的我用localReader想出来了。这是经过修改的tableToGrid，具有更好的性能。

function tableToGrid(selector, options) {
jQuery(selector).each(function() {
    if(this.grid) {return;} //Adedd from Tony Tomov
    // This is a small "hack" to make the width of the jqGrid 100%
    jQuery(this).width("99%");
    var w = jQuery(this).width();

    // Text whether we have single or multi select
    var inputCheckbox = jQuery('input[type=checkbox]:first', jQuery(this));
    var inputRadio = jQuery('input[type=radio]:first', jQuery(this));
    var selectMultiple = inputCheckbox.length > 0;
    var selectSingle = !selectMultiple && inputRadio.length > 0;
    var selectable = selectMultiple || selectSingle;
    //var inputName = inputCheckbox.attr("name") || inputRadio.attr("name");

    // Build up the columnModel and the data
    var colModel = [];
    var colNames = [];
    jQuery('th', jQuery(this)).each(function() {
        if (colModel.length === 0 && selectable) {
            colModel.push({
                name: '__selection__',
                index: '__selection__',
                width: 0,
                hidden: true
            });
            colNames.push('__selection__');
        } else {
            colModel.push({
                name: jQuery(this).attr("id") || jQuery.trim(jQuery.jgrid.stripHtml(jQuery(this).html())).split(' ').join('_'),
                index: jQuery(this).attr("id") || jQuery.trim(jQuery.jgrid.stripHtml(jQuery(this).html())).split(' ').join('_'),
                width: jQuery(this).width() || 150
            });
            colNames.push(jQuery(this).html());
        }
    });
    var data = [];
    var rowIds = [];
    var rowChecked = [];
    jQuery('tbody > tr', jQuery(this)).each(function() {
        var row = [];
        var rowobj = {};
        var rowPos = 0;
        jQuery('td', jQuery(this)).each(function() {
            if (rowPos === 0 && selectable) {
                var input = jQuery('input', jQuery(this));
                var rowId = input.attr("value");
                rowIds.push(rowId || data.length);
                rowobj["id"] = rowId || data.length;
                if (input.attr("checked")) {
                    rowChecked.push(rowId);
                }
                //row[colModel[rowPos].name] = input.attr("value");
                row.push( input.attr("value"));
            } else {
                //row[colModel[rowPos].name] = jQuery(this).html();
                row.push(jQuery(this).html());
            }
            rowPos++;
        });
        if(rowPos >0) { rowobj["cell"] = row; data.push(rowobj); }
    });

    // Clear the original HTML table
    jQuery(this).empty();

    // Mark it as jqGrid
    jQuery(this).addClass("scroll");

    jQuery(this).jqGrid(jQuery.extend({
        datatype: "local",
        data:data,
        localReader: {
            repeatitems: true,
            cell: "cell",
            id: "id"
        },
        gridview: true,
        width: w,
        colNames: colNames,
        colModel: colModel,
        multiselect: selectMultiple
        //inputName: inputName,
        //inputValueCol: imputName != null ? "__selection__" : null
    }, options || {}));


    // Set the selection
    for (a = 0; a < rowChecked.length; a++) {
        jQuery(this).jqGrid("setSelection",rowChecked[a]);
    }
});
};

如何使用jqgrid中的数据选项指定行ID

1 个答案: