2014-04-07 2 views
1

Я использую jqGrid в качестве универсального редактируемого для таблицы элемента управления. Моя цель - иметь пары name -> value в таблице, где value s являются редактируемыми.Проблема с jqGrid с динамическим colModel при редактировании строк

Все идет хорошо, пока я не запутались с colModel: если у меня есть таблица со смешанными типами значений я вынужден изменить colModel для того, чтобы соответствовать его значение редактируется. Например, в таблице с тремя значениями: Name, Surname, Married?, последний имеет тип checkbox, а другие - типа string.

После редактирования поля Married?, если щелкнуть на других областях их изменения содержания в Yes:No в режиме редактирования, строка Yes:No является один используется поле CheckBox; Кто-нибудь знает, что я делаю неправильно ?:

var data = 
[ 
    {name:"Name", value:"John"}, 
    {name:"Surname", value:"Doe"}, 
    {name:"Married", value:"No"} 
]; 
var currentrow = 0; 

function edit(id) 
{ 
    if (id && id !== currentrow) 
    { 
     var table = jQuery("#grid"); 

     function colProp(id) 
     { 
      switch (id) 
      { 
       case "1": 
       case "2": 
       return { editable: true, edittype: 'text', editoptions: {} }; 

       case "3": 
       return { editable: true, edittype: 'checkbox', editoptions: {value: 'Yes:No'} }; 
      } 
     } 

     table.jqGrid('restoreRow', currentrow); 
     table.setColProp('value', colProp(id)); 
     table.jqGrid('editRow', id, true, 
      undefined, undefined, 'clientArray'); 

     currentrow = id; 
    } 
} 

$("#grid").jqGrid 
({ 
    datatype: "local", 
    data: data, 
    colNames: ['Name', 'Value'], 
    colModel: 
    [ 
     { name: 'name' }, 
     { name: 'value' } 
    ], 
    onSelectRow: edit 
}); 

Сначала я думал, что после редактирования поля с edittype: checkbox следующие поля будучи editet наследует предыдущий edittype, поэтому я поставил editoptions Ань пустой объект при редактировании текстовых полей, но он не работает.

Я вставил code into a Fiddle, чтобы поделиться рабочим примером моей проблемы.

PS: Может быть, jqGrid - не лучший выбор для достижения моей цели, но я вынужден использовать его.

ответ

2

Чтобы решить эту проблему, вы можете просто использовать

editoptions: {value: null} 

удалить value свойство. Соответствующая демонстрация включает некоторые другие минимальные изменения, которые вы найдете здесь: http://jsfiddle.net/y9KHY/2/.

Соответствующий код

var data = [ 
     {id: "10", name:"Name", value:"John", edittype: "text"}, 
     {id: "20", name:"Surname", value:"Doe", edittype: "text"}, 
     {id: "30", name:"Married", value:"No", edittype: "checkbox"} 
    ], 
    currentrow = 0; 

function edit(id) { 
    var table = jQuery(this), 
     item = table.jqGrid("getLocalRow", id); 

    function colProp(id) { 
     switch (item.edittype) { 
      case "checkbox": 
       return { editable: true, edittype: 'checkbox', editoptions: {value: 'Yes:No'} }; 
      default: 
       return { editable: true, edittype: 'text', editoptions: {value: null} }; 
     } 
    } 

    if (id && id !== currentrow) { 
     table.jqGrid('restoreRow', currentrow); 
     table.setColProp('value', colProp(id)); 
     table.jqGrid('editRow', id, true); 

     currentrow = id; 
    } 
} 

$("#grid").jqGrid({ 
    datatype: "local", 
    data: data, 
    colNames: ['Name', 'Value'], 
    colModel: [ 
     { name: 'name' }, 
     { name: 'value', editable: true } 
    ], 
    rowNum: 10000, 
    autoencode: true, 
    gridview: true, 
    height: "auto", 
    editurl: "clientArray", 
    onSelectRow: edit 
}); 
Смежные вопросы