Цвета в строках и значения редактирования, но не отображается Jqgrid

Я хочу знать, возможно ли использовать разные цвета фона для каждой (или некоторых) строки/с.

И у меня есть еще одна проблема, я определил флажок, который я хочу установить только при добавлении, но я не хочу видеть его, когда сетка показывает все строки. Возможно ли это?

Вот мой код..

$("#<%=Me.Id & "_" %>lstBaseHab").jqGrid({
    url: '/modulos/tarifa/basehabitacion.ashx',
    datatype: 'xml',
    mtype: 'GET',
    colNames: ['Hab ID','Habitación','Importe', 'Fecha Inicio','Fecha Fin','Noches Estancia/Mínimas','Todos','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo','tarId', 'estId'],
    colModel: [
        { name: 'hab_id', index: 'hab_id', width: 100, align: 'center', editable: false, sortable: false, hidden: true},
        {name: 'hab_nombre', index: 'hab_nombre', width: 200, align: 'center', edittype: 'select', editable: true, sortable: false, editrules: { edithidden: false, required: true }
        , editoptions: { size: 1, dataUrl: '/modulos/tarifa/basehabitacion.ashx?oper=listahabs' }
        },
        { name: 'tpb_importe', index: 'tpb_importe', width: 160, align: 'center', editable: true, sortable: true },
        { name: 'fini', index: 'fini', width: 300, align: 'center', editable: true, editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker({ dateFormat: 'dd/mm/yy' }); }, 200); } }, editrules: { edithidden: false }, sortable: true },
        { name: 'ffin', index: 'ffin', width: 300, align: 'center', editable: true, editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker({ dateFormat: 'dd/mm/yy' }); }, 200); } }, editrules: { edithidden: false }, sortable: true },
        { name: 'Nochesestancia', index: 'Nochesestancia', width: 300, align: 'center', sortable: false, editable: true },
        { name: 'Lun', index: 'lun', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "1:" }, editrules: { edithidden: false }, sortable: false },
        { name: 'Mar', index: 'mar', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "2:" }, editrules: { edithidden: false }, sortable: false },
        { name: 'Mie', index: 'mie', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "3:" }, editrules: { edithidden: false }, sortable: false },
        { name: 'Jue', index: 'jue', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "4:" }, editrules: { edithidden: false }, sortable: false },
        { name: 'Vie', index: 'vie', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "5:" }, editrules: { edithidden: false }, sortable: false },
        { name: 'Sab', index: 'sab', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "6:" }, editrules: { edithidden: false }, sortable: false },
        { name: 'Dom', index: 'dom', width: 50,  formatter: "checkbox", align: 'center', editable: true, hidden: true, edittype: "checkbox", editoptions: { value: "0:" }, editrules: { edithidden: false }, sortable: false }
    ],
    ajaxSelectOptions: {
        data: {
            estId: function () { return __estId; }
        }
    },
    ajaxGridOptions: {cache: false},
    autoencode: false,
    toppager: false,
    loadonce:false,
    pager: '#preciobasepager',
    rowNum: 40,
    rowList: [20, 40, 80, 100, 200, 500, 1000],
    sortname: 'fini',
    sortorder: 'asc',
    autowidth: false,
    width: 850,
    height: -1,
    shrinkToFit: true,
    viewrecords: true,
    gridview: true,
    prmNames: {oper:"listarbaseshabitacion", addoper:"crearbasehabita", deloper:"borrabasehabita"},
    caption: 'Precios base para habitaciones'
    , editurl: '/modulos/tarifa/basehabitacion.ashx'
    , postData: {
        tarId: function ftar(){return __tarId;},
        estId: function fest(){return __estId;}
    }, afterSaveCell : function(rowid,name,val,iRow,iCol) { }
    , loadComplete: function() { }
    , onCellSelect: function(rowid, index, contents, event) {
        <%=Me.id %>_selectedRow=jQuery(this).getRowData(rowid);
    }
});

jQuery("#<%=Me.Id & "_" %>lstBaseHab").jqGrid('navGrid',
    '#preciobasepager',
    { alerttext: "Seleccione un registro.",
        add: true, addtitle: "Crear precio base", //addfunc: newPrecioBase, 
        del: true, deltitle: "Eliminar precio base", // delfunc: delPrecioBase,
        edit: false, edittitle: "Editar precio base",
        search: false, searchtitle: "Buscar",
        refresh: true,
        cloneToTop: true
    },
    { width: 350, resize: false, closeAfterEdit: true, recreateForm: true, viewPagerButtons: true, afterComplete: null },
    { width: 350, resize: false, closeAfterAdd: true, recreateForm: true, viewPagerButtons: true, afterComplete: null },
    { width: 350, resize: false, msg: "¿Desea eliminar la relación?", afterComplete: null }
);

Если я поставлю hidden:true (как это видно в colModel), его скрытое отображение, но я не могу определить его при добавлении..

Спасибо.


jquery jqgrid hidden
person bombai    schedule 22.11.2012    source источник
comment
Вам лучше отформатировать код, который вы включили в вопрос. Вы можете удалить ненужные пробелы в левом размере в любом текстовом редакторе, который вы используете. В качестве альтернативы вы можете выбрать строки, в которых вам нужно удалить ненужные пробелы, и нажать кнопку { }. См., например, здесь, как можно отформатировать код в редакторе stackoverflow.   -  person Oleg    schedule 22.11.2012

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы установить цвет фона для отдельных строк, например, на основе содержимого столбцов прихода в сетке, вы можете использовать обратный вызов rowattr. Это наиболее эффективное решение (если вы используете gridview: true), поскольку оно позволяет изменять атрибуты строк динамически в момент создания строк. Таким образом, вы просто сообщите jqGrid, какие дополнительные атрибуты вы хотите иметь в строках.

Ответ демонстрирует подход.

Вторая часть вашего вопроса (про чекбоксы) мне не понятна. Стандартный formatter: "chechboxs" будет использоваться для отображения данных в сетке и для редактирования. Вы можете реализовать свои требования, если удалите formatter: "chechboxs", но реализуете все дополнительное поведение, которое вам нужно, внутри обратного вызова dataInit параметры редактирования. Еще одна возможность, которая у вас есть, — это использование настраиваемого элемента управления редактированием< /а>.

ОБНОВЛЕНО: я бы порекомендовал вам дополнительно использовать шаблоны столбцов. У вас есть несколько столбцов, в которых вы используете флажки, и несколько столбцов («fini», «ffin»), в которых вы используете средство выбора даты. Таким образом, ваш код будет меньше, читабельнее и лучше управляемым, если вы определите где-то в своем коде над определением переменных jqGrid, которые содержат общие свойства для столбцов:

var dateTemplate = { width: 300, align: 'center', editable: true
        editoptions: {
            dataInit: function(el) {
                setTimeout(function() {
                    $(el).datepicker({ dateFormat: 'dd/mm/yy' });
                }, 200);
            }
        }, editrules: { edithidden: false }, sortable: true },
    checkboxTemplate = {width: 50,  formatter: "checkbox", align: 'center',
        editable: true, hidden: true, edittype: "checkbox",
        editrules: { edithidden: false }, sortable: false};

тогда вы сможете переписать определение соответствующих столбцов jqGrid внутри colModel следующим образом:

{ name: 'fini', template: dateTemplate },
{ name: 'ffin', template: dateTemplate },
...
{ name: 'Lun', index: 'lun', editoptions: {value: "1:"}, template: checkboxTemplate },
{ name: 'Mar', index: 'mar', editoptions: {value: "2:"}, template: checkboxTemplate },
{ name: 'Mie', index: 'mie', editoptions: {value: "3:"}, template: checkboxTemplate },
{ name: 'Jue', index: 'jue', editoptions: {value: "4:"}, template: checkboxTemplate },
{ name: 'Vie', index: 'vie', editoptions: {value: "5:"}, template: checkboxTemplate },
{ name: 'Sab', index: 'sab', editoptions: {value: "6:"}, template: checkboxTemplate },
{ name: 'Dom', index: 'dom', editoptions: {value: "0:"}, template: checkboxTemplate }
person Oleg    schedule 22.11.2012
comment
Привет Олег, если я использую rowattr но не знаю какие данные приходят, как мне это сделать? Например, я могу получить 2 или 3 разных hab_nombre, могу ли я сделать rowattr: function (rd) { if (rd.GroupHeader === "1") { // verify that the testing is correct in your case return {"class": "myAltRowClass"}; }, но с некоторыми для каждого другого ..? - person bombai; 22.11.2012
comment
Во второй части, извините за мое объяснение, у меня есть все colmodel, которые вы можете видеть, но Lun, Mar, Mie, Jue, Vie, Sab, Dom я хочу установить только при добавлении строки, но когда сетка показывает данные, я не хочу видеть эти столбцы. Вы меня понимаете? - person bombai; 22.11.2012
comment
@bombai: Если вы используете datatype: "xml", код может быть немного сложнее. Вы можете использовать код типа $('cell:eq(1)', rd) для получения необходимых данных. Подробности см. в другом ответе. Он описывает cellattr вместо rowattr, но проблема одинакова в обоих случаях. Я включил в ОБНОВЛЕННУЮ часть своего ответа дополнительную информацию о шаблонах столбцов, которые я бы рекомендовал вам использовать. - person Oleg; 22.11.2012
comment
@bombai: насчет "Lun, Mar, Mie, Jue, Vie, Sab, Dom" я до сих пор не понимаю, чего ты хочешь. Возможно, вы хотите иметь одно поле ввода с 7 флажками во время редактирования сетки? - person Oleg; 22.11.2012
comment
@bombai: Возможно, вам нужно использовать edithidden: true. В этом случае скрытые поля будут созданы автоматически в форме добавления/редактирования. Так что вам нужно просто показать поля. См. ответ. Вам нужно просто упростить код и всегда использовать beforeShowForm: function() { $('#tr_Lun,#tr_Mar,#tr_Mie,#tr_Jue,#tr_Vie,#tr_Sab,#tr_Dom').show(); } - person Oleg; 22.11.2012
comment
У меня проблема с кодом rowattr выше, потому что я не знаю, какие значения могут иметь ячейку, мне нужно определить другой цвет для каждого другого значения. Вы знаете, как я могу это сделать? - person bombai; 22.11.2012
comment
@bombai: я уже писал вам, что вы разместили недостаточно информации. Вы должны включить хотя бы одну строку данных, которые будут возвращены из '/modulos/tarifa/basehabitacion.ashx'. Кроме того, вы должны более четко указать хотя бы несколько простых критериев, по которым вы хотите выбрать цвет строки. - person Oleg; 22.11.2012
comment
Жалко Олега. Здесь вы можете просмотреть скриншот i.imgbox.com/acn0jIxH.jpg, как вы видите , я хочу, чтобы все Habitación Doble, например, были оранжевыми, а отдельные - зелеными, но я не знаю, сколько разных видов я могу получить.. Я не получу более 5 разных видов, но количество и тип динамический. . Спасибо. - person bombai; 22.11.2012