Exemple simple d'utilisation de la grille arborescente dans jquery easyui-js tutoriel-php.cn

Exemple simple d'utilisation de la grille arborescente dans jquery easyui

高洛峰

Libérer： 2016-12-29 15:05:11

original

1437 Les gens l'ont consulté

Les exigences du projet sont indiquées ci-dessous. Dans les données json renvoyées par le serveur, elles doivent être traitées par JS et des cases à cocher doivent être ajoutées, et les cases à cocher doivent répondre aux opérations JS.

jquery easyui中treegrid用法的简单实例

Dans la grille arborescente d'easyui, aucun plug-in prêt à l'emploi n'a été trouvé. Je dois le modifier moi-même. Le code est le suivant

<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>

Copier après la connexion

<. 🎜>Ce qui précède est l'intégralité du code HTML, où L'avantage d'easyui est que divers attributs appelés par JS peuvent être écrits directement dans les attributs du tableau, ce qui est intuitif et facile à comprendre. Ensuite, ajoutez la case à cocher.

//对名称列数据进行格式华
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;);
}

Copier après la connexion

La méthode de case à cocher utilisant $(set_power_1") ne peut pas répondre, probablement parce qu'easyui l'a traitée.

Plus de jquery Pour des articles connexes sur des exemples simples de grille arborescente utilisation dans easyui, veuillez faire attention au site Web PHP chinois