Цветове в редове и редактиране на стойности, но не показват 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