jqgrid: несколько вопросов - матричный дисплей - PullRequest
Новая
       10

jqgrid: несколько вопросов - матричный дисплей

0 голосов
/ 22 марта 2011

У меня есть данные матрицы, хранящиеся в таблице как таблицы ниже:

  • Размеры матрицы - MatrixId, NoOfRows, NoOfCol
  • MatrixValues ​​- MatrixId, RowNo, ColNo, Value

Как я могу заставить jqGrid взять нет. строк и столбцов динамически а также отображать сериализованные данные в матрицу? Есть прямой путь или мне нужно будет реализовать циклы for для загрузки данных в матрицу?

Можно ли отображать строки в виде столбцов, а столбцы - в виде строк (чтобы заголовки столбцов были выровнены по вертикали)?

Можно ли включить только встроенное редактирование и отключить редактирование на основе форм?

1 Ответ

2 голосов
/ 23 марта 2011

Я только что написал ответ на другой вопрос, где я описал, как создать сетку с динамическим числом столбцов (количество строк всегда является динамическим в jqGrid).Мне кажется, таким образом вы можете отобразить любую матрицу.В вашем случае вы, вероятно, можете сделать код проще, потому что можете использовать общие имена столбцов, такие как «1», «2» и т. Д. (Или «Кол. 1», «Кол. 2» и т. Д.) И т. Д.

Я изменил код так, чтобы он использовал массив массивов (матрица) вместо массива для объектов с именованными свойствами .Поэтому jqGrid будет выглядеть следующим образом:

enter image description here

или это:

enter image description here

в зависимости от входных данных JSON.

Полное демо можно найти здесь .Полный код JavaScript демонстрации вы можете найти ниже: 

var mygrid=jQuery("#list"),
    cmTxtTemplate = {
        width:40,
        align:"center",
        sortable:false,
        hidden:true
    }, currentTemplate = cmTxtTemplate, i,
    cm = [], maxCol = 30, dummyColumnNamePrefix = "", //"Col. ",
    clearShrinkToFit = function() {
        // save the original value of shrinkToFit
        var orgShrinkToFit = mygrid.jqGrid('getGridParam','shrinkToFit');
        // set shrinkToFit:false to prevent shrinking
        // the grid columns after its showing or hiding
        mygrid.jqGrid('setGridParam',{shrinkToFit:false});
        return orgShrinkToFit;
    },
    setGridWidthAndRestoreShrinkToFit = function(orgShrinkToFit,width) {
        // restore the original value of shrinkToFit
        mygrid.jqGrid('setGridParam',{shrinkToFit:orgShrinkToFit});
        mygrid.jqGrid('setGridWidth',width);
    },
    dummyTestRegex = new RegExp(dummyColumnNamePrefix+"(\\d)+"),
    counter = 1;

// Add dummy hidden columns. All the columns has the same template
for (i=0;i<maxCol;i++) {
    cm.push({name:dummyColumnNamePrefix+(i+1),template:currentTemplate});
}

mygrid.jqGrid({
    url:'Matrix1.json',
    datatype: "json",
    // colNames will be set based on the properties for JSON input
    colModel:cm,
    height:"auto",
    rownumbers:true,
    loadonce:true,
    gridview: true,
    rowNum: 1000,
    sortname:"",
    jsonReader: {
        cell: "",
        id: function (obj) {
            return "id"+counter++;
        },
        page: function (obj) {
            var rows = obj.rows, colModel = mygrid[0].p.colModel,
                cmi, width = 0, iFirstDummy, cols, orgShrinkToFit,
                showColNames = [], hideColNames = [];

            if (typeof(rows) === "undefined" || !(rows.length>0)) {
                // something wrong need return
                return obj.page;
            }

            // find the index of the first dummy column
            // in the colModel. If we use rownumbers:true,
            // multiselect:true or subGrid:true additional
            // columns will be inserted at the begining
            // of the colModel
            iFirstDummy = -1;
            for(i=0;i<colModel.length;i++) {
                cmi = colModel[i];
                if (dummyTestRegex.test(cmi.name)) {
                    iFirstDummy = i;
                    break;
                }
            }
            if (iFirstDummy === -1) {
                // something wrong need return
                return obj.page;
            }

            orgShrinkToFit = clearShrinkToFit();

            // we get the first row of the JSON data
            cols = rows[0].length;

            // fill the list of unused columns
            for(i=0;i<colModel.length;i++) {
                cmi = colModel[i];
                if (i<iFirstDummy+cols) {
                    cmi.width = currentTemplate.width;
                    showColNames.push(cmi.name);
                } else {
                    hideColNames.push(cmi.name);
                }
            }
            mygrid.jqGrid('showCol',showColNames);
            mygrid.jqGrid('hideCol',hideColNames);
            setGridWidthAndRestoreShrinkToFit(orgShrinkToFit,
                cols*currentTemplate.width);

            return obj.page;
        }
    }
});
$("#readJson1").click(function() {
    mygrid.jqGrid('setGridParam',
                  {datatype:'json',page:1,url:'Matrix1.json'})
          .trigger('reloadGrid');
});
$("#readJson2").click(function() {
    mygrid.jqGrid('setGridParam',
                  {datatype:'json',page:1,url:'Matrix2.json'})
          .trigger('reloadGrid');
});

Самый простой способ транспонировать матрицу (отразить ее по главной диагонали) - на сервере.Если вы не можете сделать это, вы можете создать и заполнить транспонированную матрицу внутри функции page (см. Мой код выше) и просто заменить row часть obj на транспонированную матрицу.

...