A simple example of the use of treegrid in jquery easyui

  • 2020-03-30 01:44:42
  • OfStack

The project requirements are shown in the following figure. In the json data returned from the server, JS processing is required to add the checkbox, and the checkbox needs to respond to the JS operation.
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201402/20140218085726.png ">
In easyui's treegrid, there is no ready-made plug-in, so I need to modify and clean it up. The code is as follows


<table class="easyui-treegrid" style="width:700px;height:250px"  url='control_node_json?group_id=$info[id]&access_node=$_REQUEST[access_node]"' idField="id" treeField="title" fit="true" toolbar="#control_node_toolbar_{$info[id]}">
        <thead>  
          <tr>
            <th field="title" width="200px" data-options="formatter:title_formatter"> The name of the </th>
            <th field="name" width="200px"> node </th>
            <th field="status" width="50px"> state </th>
            <th field="remark"> note </th>
          </tr>
          <thead>  
        </table>
        <div id="control_node_toolbar_{$info[id]}">
            <a href="javascript:alert('test');" class="easyui-linkbutton" iconCls="icon-add" plain="true"> control </a>
        </div>

Above is the entire HTML code, in which the benefits of easyui, JS call various attributes can be directly written in the table properties, intuitive and easy to understand. Next add the checkbox.

//Format the name column data
var access_node='{$_REQUEST[access_node]}'.split(',');
function title_formatter(value,node){ 
 var content='<input name="set_power" id="set_power_'+node.id+'" onclick="set_power_status('+node.id+')" class="set_power_status" type="checkbox" value="'+node.id+'" />'+value;
 return content;
}
function set_power_status(menu_id){
 alert(' The function and action methods to call are written here ');
}

The checkbox with $(set_power_1") is not responsive, presumably because easyui has been processed.


Related articles: