当前位置:首页 > 编程教程 > jQuery技术文章 > jquery easyui中treegrid用法的简单实例

关于jquery easyui中treegrid用法的例子

  • 发布时间:
  • 作者:码农之家
  • 点击:155

这篇文章主要知识点是关于jquery、easyui、treegrid、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Bootstrap与jQuery UI框架设计
  • 类型:jQuery大小:180 MB格式:PDF作者:肖睿//吴振宇
立即下载

jquery easyui中treegrid用法的简单实例

项目需求如下图,在服务端返回的json数据中,要经过JS处理,添加复选框,并且复选框需响应JS操作。
jquery easyui中treegrid用法的简单实例
在easyui 的treegrid中,没有找到现成的插件,自己需要修改整理,代码如下

 

<table class="easyui-treegrid"   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">名称</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('test');" class="easyui-linkbutton" iconCls="icon-add" plain="true">控制</a>
        </div>

上面是整个HTML代码,其中在easyui的好处是,JS调用的各种属性都可以直接写在table的属性里,直观易懂。接下来就把checkbox加进去。
 

//对名称列数据进行格式华
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('要调用的函数和操作方法写这里');
}

其中用checkbox用$(set_power_1")这种方法是响应不了的,估计是因为easyui经过处理的原因。

 

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.852149

jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults。 依赖 datagrid 用法 table id="tt"/table $('#tt').treegrid({ url:'treegrid_data.json', treeField:'name', columns:[[ {title:'Task Name',field:'name',width:180}, {field:'persons',title:'Persons',width:60,align:'right'}, {field:'begin',title:'Begin Date',width:80}, {field:'end',title:'End Date',width:80} ]] }); 特性 其特性扩展自 datagrid,下列是为 treegrid 增加的特性。 名称 类型 说明 默认值 treeField string 定义树节点的字段。 null animate boolean 定义当节点展开或折叠时是否显示动画效果。 false 事件 其事件扩展自 datagrid,下列是为 treegrid 增加的事件。 名称 参数 说明 onClickRow row 当用户点击一个节点时触发。 onDblClickRow row 当用户双击一个节点时触发。 onBeforeLoad row, param 发出一个加载数据的请求前触发,返回 false 就取消加载动作。 onLoadSuccess row, data 当数据加载成功时……

网友NO.149508

jQuery Easyui datagrid/treegrid 清空数据

在使用easyui的treegrid或datagrid的过程经常会有这样的场景,如:需要按不同的类型加载数据时,如果选择的分类下没有数据应该把上次展示的数据清空,以免引用歧义。下面给出两种方法供初学者参考: 方法一: var item = $('#filegrid').datagrid('getRows');if (item) {for (var i = item.length - 1; i = 0; i--) {var index = $('#filegrid').datagrid('getRowIndex', item[i]);$('#filegrid').datagrid('deleteRow', index);}} 方法二推荐: $('#filegrid').datagrid('loadData', { total: 0, rows: [] }); 以上是对datagrid的操作,如果是treegrid,只需把datagrid修改为treegrid即可。 ……

网友NO.775927

jQuery EasyUI的TreeGrid查询功能实现方法

最近需要实现对treeGrid的查询功能,具体查询界面如下: 可以查询根节点和具体子节点的信息,开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能,于是利用异步AJAX查询了一下数据返回后,赋值给变量,然后利用 TreeGrid的loadData加载这个json格式的返回结果实现了对TreeGrid的查询功能,代码如下: function searchROM() { var product = $('#Product').combobox('getValue'); var keytype = $('#keytype').combobox('getValue'); var keywords = $('#keywords').val(); var url = encodeURI('/GoodsROM/ROMList?product=' + product + 'keywords=' + keywords+' $.post(url, {}, function(data) { var d = data;//返回json格式结果 $('#grid').treegrid('loadData',d);//加载数据更新treegrid }, 'json'); } 总结 以上所述是小编给大家介绍的jQuery EasyUI的TreeGrid查询功能实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com