treegrid复选框

最新推荐文章于 2019-06-21 17:36:54 发布
最新推荐文章于 2019-06-21 17:36:54 发布
阅读量797 收藏
点赞数
分类专栏： easyui 文章标签： easyui checkbox


然后是代码：
html文件：
<body>
       <h1>TreeGrid</h1>
       <div>
              <a id="consle" href="#">consle</a>
       </div>
       <table id="test" title="Folder Browser" style="width:400px;height:300px" >            
       </table>     
</body>
说明：没什么内容，标题，然后是一个表格，我为了做些测试放了个按钮consle，不用删掉即可，当然要引用几个js文件和css文件：
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <meta name="keywords" content="jquery,ui,easy,easyui,web">
       <meta name="description" content="easyui help you build your web page easily!">
       <title>jQuery EasyUI Demo</title>
       <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
       <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
       <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
       <script type="text/javascript" src="ws.js"></script>
。

接着是js文件：
$(function(){
       $('#test').treegrid({ 
              url:"data/treegrid_data.json", 
              idField:'id', 
              treeField:'name', 
              animate:"true",
              rownumbers:"true",
              columns:[[ 
                     {title:'Task Name',field:'name',formatter :function(value,rowData,rowIndex){
                            return "<input type='checkbox'>"  + rowData.name;
               },width :180}, 
                     {field:'size',title:'Persons',width:60,align:'right'}, 
                     {field:'date',title:'Begin Date',width:80}
              ]] 
       });
       $("#consle").bind("click",consleclick)
});

function set_power_status(){ 
       var idList = ""; 
         $("input:checked").each(function(){
               var id = $(this).attr("id");
               if(id.indexOf("ceshi_")>-1)
                       idList += id.replace("ceshi_",'')+',';
         })
       alert(idList);
}

function consleclick(){
       var node = $('#test').treegrid('expandAll',2);
}

说明：调用了easyUI的treegrid，为了显示checkbox，对第一列做了个formatter，为了展示效果绑定了取得选中checkbox的事件，不用可以去掉，也可以去掉alert，更改为其他的事件处理函数。
lipromising
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
带复选框的TreeGrid
04-14
带复选框的TreeGrid
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
08-30
本篇将详细介绍如何在Bootstrap Table中实现复选框的默认选中功能，特别地，我们将根据从数据库获取的状态来决定复选框是否被选中。 首先，我们需要引入Bootstrap Table的相关库，包括CSS和JavaScript文件。这些...
【ExtJS实践】之二 ：TreeGrid显示复选框
aoyitong7374的博客
06-11 307
ExtJS3.4的TreeGrid不提供Tree那样的Checkbox树。从网上搜索了一下，找到了国外的一个例子可以解决此问题。 资料地址：https://gist.github.com/745436 实现步骤： 1、修改TreeGridNodeUI.js文件，修改后的文件全文如下： 1 /*! 2 * Ext JS Library 3.4 3 * Cop...
treegrid添加复选框, 附带级联事件(自用, 非法调用方式不做处理)
wzp6010625的博客
12-07 1872
引入treegridEvent.js/** * 自定义树型表格事件及方法（级联时用） * 针对手动加的复选框, 相关的事件及方法 */ var treegridEvent = { cascade : true, //是否级联 linkage : false, //行选中与复选框勾选是否联动 gridId : "domain_treegrid", //表格id //复选框选中...
easyui treegrid 添加复选框
专注=成功
11-30 728
$(function(){ $('#test').treegrid({ url:"data/treegrid_data.json", idField:'id', treeField:'name', animate:"true", rownumbers:"true", col...
ExtJS4.x treegrid 控件复选框的研究
图钉的笔记
04-18 2180
1 treegrid 简介 最近在研究ExtJS4.x版本，官方在发布包中包含了一个treegrid插件，先看下效果： 本人想在Controller中动态获取、设置左侧的复选框列。 这里是官方提供的示例：http://www.ostools.net/uploads/apidocs/extjs4.1/examples/tree/treegrid.html 这里具体的js：http:/
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
10-22
主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法的相关资料,需要的朋友可以参考下
jQuery Easyui Treegrid实现显示checkbox功能
01-19
通关类型判断显示包库/还是镜像（列有所不同，镜像共4列），勾选一个复选框，后面的复选框变为不可勾选状态。 下面是具体代码： 1，初始化treegrid，（其中有几个type列，是由后台人员提供的字段名，虽然我也不想弄...
fancytree：JavaScript树视图树网格插件，支持键盘，内联编辑，过滤，复选框，拖放和延迟加载
02-03
花式树 Fancytree（ 续集）是一个JavaScript树视图/树网格插件，支持键盘，内联编辑，过滤，复选框，拖放和延迟加载。状态 有关详细信息，请参见。开始使用。 。 如有疑问，或 。 玩 ， 或 。ES6快速入门import $ ...
扩展easyui treegrid 级联选择
diedouju3498的博客
07-05 383
/** * 扩展树表格级联勾选方法： * @param {Object} container * @param {Object} options * @return {TypeName} */ $.extend($.fn.treegrid.methods, { ...
treegrid动态加载tree级联更新下拉列表动态计算数量乘以单价的和
04-18
treegrid动态加载tree级联更新下拉列表，保存让下拉列表显示名称，不是id，和动态计算数量乘以单价的和，和总合计，添加一列删除一列,撤回,保存的合计。
Ext的TreeGrid增加复选框(CheckBox)与复选框操作
weixin_30781631的博客
07-03 239
最近项目开发要求用树形列表显示多列数据，结构例如： 研发部 |--张三 男 25岁 |--李四 女 25岁 项目部 |--王二 男 18岁 接到任务后，首先想到的时Ext的Tree控件，但Ext.Tree.Treepanel只能显示单列数据，也就是说无法显示 "性别"和"年龄"这两个字段。 到网上查了相关资料后发现Ext拓展的TreeGrid是Table数,可以满...
easyui treegrid 复选框问题
专注=成功
11-30 756
点击复选框时只能单选，不知道什么问题，求大侠们指教 源码 //设置treegrid自适应 $(window).resize(function(){ $('#treeGrid').treegrid('resize', { width: '100%' }) }); //js获取项目根路径，如： http://localhost:8088/jq...
ExtJs6 TreeGrid（级联选择树）
seasidexin的专栏
06-21 1145
ExtJs6 TreeGrid var treeGrid = Ext.create("Ext.tree.Panel", { flex: 1, store: { type: 'tree', fields: ['Name', 'ID', 'Type'] }, id: 'teleTreeGrid', useArrow...
treegrid级联勾选或深度级联勾选扩展：两种扩展
onebyte的专栏
12-20 749
treegrid没有级联勾选，要用怎么办？自己扩展呗~   先明确两个概念： 1、级联勾选：不包括未加载的子节点 2、深度级联勾选：包括未加载的子节点   两种思路： 1、扩展个新方法cascadeCheck，当需要进行级联勾选时，调用该方法进行级联勾选或不勾选。 2、扩展onLoadSuccess方法，添加一个自定义属性：cascadeCh
实现TreeGrid中复选框的级联选择效果（类似zTree的选择效果）
yansong_8686的专栏
12-19 5969
$(function(){ //点击多选框，构造类似zTree的级联选择效果 $("#div1").on("click","input[type=checkbox]",function(){ var obj = $(this); var trParent = obj.closest("tr");//从元素本身开始，逐级向上级元素匹配，并
DataGrid分页显示复选框选中
Ricky_66的专栏
09-28 1871
<br />我们都曾做过DataGrid的分页实现，使用.NET中的控件非常简单，但如果在DataGrid中添加一个模板列，内部放一个CheckBox的话， 转到下一页再转回则会发现原来选中的内容已经没有了！以下的演示是在.NET2005中使用GridView控件实现的分页后实现复选框多选功能，请先观 察代码！ <br /> <br />Default.aspx<br /><%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.
可级联选择tree中的checkBox (flex)
john2522的专栏
04-14 3379
<br />在包common.control.tree下创建类TreeCheckBoxRender，其中关键的是tree组建的invalidateList()，实现Tree的自动刷新.在checkbox的事件响应下，递归其子节点就可以修改自己的selected的值（其中data的该checkbox对象的一个抽象，或者说是一个引用），然后分发事件，由tree的invalidateList（）实现，级联选择。<br /> <br /> <br /> package common.control.tree {
easyui Tree 全选节点
weixin_33766168的博客
11-28 641
2019独角兽企业重金招聘Python工程师标准>>> ...
layui treegrid 复选框全选
最新发布
06-10
你可以通过以下步骤实现layui treegrid的复选框全选功能： 1. 在treegrid的表头中添加一个全选复选框。 2. 在每行数据中添加一个复选框。 3. 使用jQuery的prop()方法来控制全选复选框和每行数据的复选框的选中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值