TreeGrid как проверить/снимите все дочерние подуровня флажков, когда метка родитель

Question

Я построил TreeGrid со встроенным флажком в колонке «Имя», такие как JSON данные:

{"id":"1","name":"<input type='checkbox' class='itmchk' ><strong>ECHANGEUR<\/strong>","level":"0","parent":"null","isLeaf":false,"expanded":true,"loaded":true} 

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

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

Пояснения к примеру: Если я нажимаю на родительской строке флажке (так он стал непроверенным), подуровень ряды становятся UNCHECKED

Я новичок с jqGrid, но это отличный инструмент, которого я хочу узнать свойство. Пожалуйста, вы можете отвезти меня таким образом? Или вы можете предложить, где я могу найти примеры, которые я хочу сделать? Я искал документацию, но безуспешно.

Большое спасибо заранее JiheL

Answer 1

Прежде всего я рекомендую вам не размещать фрагменты HTML внутри данных JSON. Можно использовать custom formatter включить флажки внутри ячеек сетки:

formatter: function (cellvalue) { 
    return "<input type='checkbox' class='itmchk' ><strong>" + 
     $.jgrid.htmlEncode(cellvalue) + "</strong>"; 
} 

Для контроля проверки/Непроверки флажков вы можете использовать beforeSelectRow дозвон сетки. jqGrid привязано внутренне click событие к телу сетки. Таким образом, обработчик событий не существует непосредственно на элементе event bubbling. Это позволяет уловить проверку/снятие отметки любых флажков внутри одного beforeSelectRow обратного вызова. Внутри beforeSelectRow вы должны сначала проверить, был ли он щелчок на флажке, который вы хотите контролировать.

Обратный звонок beforeSelectRow имеет два параметра: rowid и event object. Свойством target объекта события будет элемент DOM, который был нажат пользователем. Поскольку вы добавляете свой собственный класс itmchk к каждому из таких флажков, этого будет достаточно, чтобы проверить класс на клике.

Следующая проблема заключается в том, что многие методы jqGrid, которые работают с TreeGrid, такие как getNodeChildren, имеют record в качестве входного параметра, но вместо этого у вас есть только rowid. jqGrid сохраняет загруженные элементы сетки локально. Таким образом, самый простой способ получить record от rowid - использовать метод getLocalRow.

В результате код beforeSelectRow обратного вызова может быть следующим:

beforeSelectRow: function (rowid, e) { 
    var $this = $(this), 
     isLeafName = $this.jqGrid("getGridParam", "treeReader").leaf_field, 
     localIdName = $this.jqGrid("getGridParam", "localReader").id, 
     localData, 
     state, 
     setChechedStateOfChildrenItems = function (children) { 
      $.each(children, function() { 
       $("#" + this[localIdName] + " input.itmchk").prop("checked", state); 
       if (!this[isLeafName]) { 
        setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", this)); 
       } 
      }); 
     }; 
    if (e.target.nodeName === "INPUT" && $(e.target).hasClass("itmchk")) { 
     state = $(e.target).prop("checked"); 
     localData = $this.jqGrid("getLocalRow", rowid); 
     setChechedStateOfChildrenItems($this.jqGrid("getNodeChildren", localData), state); 
    } 
} 

Важно отметить, что дети флажки будут проверены/снято только на предварительно нагруженные элементах. Поскольку вы загружаете данные сетки сразу и используете свойство loaded: true, это не проблема для вас.

Соответствие demo показывает, что приведенный выше код действительно работает. Это модификация демо, которую я создал, отвечая на ваш предыдущий вопрос.