Heim  >  Artikel  >  Web-Frontend  >  Einfaches Beispiel für die Verwendung von Treegrids in jquery easyui

Einfaches Beispiel für die Verwendung von Treegrids in jquery easyui

高洛峰
高洛峰Original
2016-12-29 15:05:111402Durchsuche

Die Projektanforderungen sind wie folgt: In den vom Server zurückgegebenen JSON-Daten müssen diese von JS verarbeitet und Kontrollkästchen hinzugefügt werden, und die Kontrollkästchen müssen auf JS-Vorgänge reagieren.

jquery easyui中treegrid用法的简单实例

Im Baumgitter von easyui wurde kein fertiges Plug-in gefunden. Ich muss es selbst ändern. Der Code lautet wie folgt Das Obige ist der gesamte HTML-Code. Der Vorteil von easyui besteht darin, dass verschiedene von JS aufgerufene Attribute direkt in die Attribute der Tabelle geschrieben werden können, was intuitiv und leicht zu verstehen ist. Als nächstes fügen Sie das Kontrollkästchen hinzu.

<table class="easyui-treegrid" style="width:700px;height:250px"  url=&#39;control_node_json?group_id=$info[id]&access_node=$_REQUEST[access_node]"&#39; idField="id" treeField="title" fit="true" toolbar="#control_node_toolbar_{$info[id]}">
        <thead>  
          <tr>
            <th field="title" width="200px" data-options="formatter:title_formatter">名称</th>
            <th field="name" width="200px">节点</th>
            <th field="status" width="50px">状态</th>
            <th field="remark">备注</th>
          </tr>
          <thead>  
        </table>
        <div id="control_node_toolbar_{$info[id]}">
            <a href="javascript:alert(&#39;test&#39;);" class="easyui-linkbutton" iconCls="icon-add" plain="true">控制</a>
        </div>

Die Checkbox-Methode, die $(set_power_1") verwendet, kann nicht reagieren. Dies liegt wahrscheinlich an der EasyUI-Verarbeitung.

//对名称列数据进行格式华
var access_node=&#39;{$_REQUEST[access_node]}&#39;.split(&#39;,&#39;);
function title_formatter(value,node){ 
 var content=&#39;<input name="set_power" id="set_power_&#39;+node.id+&#39;" onclick="set_power_status(&#39;+node.id+&#39;)" class="set_power_status" type="checkbox" value="&#39;+node.id+&#39;" />&#39;+value;
 return content;
}
function set_power_status(menu_id){
 alert(&#39;要调用的函数和操作方法写这里&#39;);
}

Mehr JQuery Für verwandte Artikel über einfache Beispiele von Wenn Sie Treegrid in EasyUI verwenden möchten, achten Sie bitte auf die chinesische PHP-Website

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn