Extjs3.4 带复选框的树结构（Tree+checkbox）案例

最新推荐文章于 2021-05-14 10:10:14 发布
最新推荐文章于 2021-05-14 10:10:14 发布
阅读量4.6k 收藏 1
点赞数
分类专栏： ExtJs 文章标签： extjs tree function licensing 教育 struts
框架为struts2 

1. jsp页面： 


Java代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <%@taglib prefix="s" uri="/struts-tags"%>  
  3. <%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>    
  4. <html xmlns="http://www.w3.org/1999/xhtml" >  
  5.   <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  7. <title>种类指派</title>  
  8. <!-- ExtJS library -->  
  9. <link rel="stylesheet" type="text/css" href="css/ext/ext-all.css" />  
  10. <script type="text/javascript" src="js/ext/ext-base.js"></script>  
  11. <script type="text/javascript" src="js/ext/ext-all.js"></script>  
  12. <script type="text/javascript" src="js/ext/edittree/categorychecktree.js"></script>  
  13. <script type="text/javascript" src="js/ext/edittree/TreeCheckNodeUI.js"></script>  
  14. <script type="text/javascript" src="js/ext/examples.js"></script>  
  15. <link href="css/ext/ext-patch.css"  type="text/css" rel="stylesheet"/>  
  16.   
  17. <!-- Common Styles for the examples -->  
  18. <link rel="stylesheet" type="text/css" href="css/ext/examples.css" />  
  19.   
  20.   
  21. <style type="text/css">  
  22.     .complete .x-tree-node-anchor span {  
  23.         text-decoration: line-through;  
  24.         color: #777;  
  25.     }  
  26.   .x-tree-node .root{  
  27.   background-image: url(css/images/default/tree/category.png)  
  28.   }    
  29. </style>  
  30. </head>  
  31. <body style="padding:0 0 0 ;">  
  32. <!-- EXAMPLES -->  
  33. <div id="tree-div" ></div>  
  34. <input type="hidden" id="name" name="name" value='<s:property value="product.name"/>'/>  
  35. <input type="hidden" id="productid" name="productid" value='<s:property value="productid"/>'/>  
  36. </body>  
  37. </html>  


2.categorychecktree.js 

Java代码   收藏代码
  1. /*! 
  2.  * Ext JS Library 3.4.0 
  3.  * Copyright(c) 2006-2011 Sencha Inc. 
  4.  * licensing@sencha.com 
  5.  * http://www.sencha.com/license 
  6.  */  
  7.   
  8. Ext.onReady(function(){  
  9.     var tree = new Ext.tree.TreePanel({  
  10.         renderTo:'tree-div',  
  11.      //   title: document.getElementById('name').value+'——>指派种类',  
  12.         align:'center',  
  13.         height: 300,  
  14.         width: 400,  
  15.         useArrows:true,  
  16.         autoScroll:true,  
  17.         animate:true,  
  18.        // enableDD:true,拖拽  
  19.         containerScroll: true,  
  20.         expanded:true,  
  21.         rootVisible: false,  
  22.         checkModel:'single',  
  23.         onlyLeafCheckable:true,  
  24.         frame: true,  
  25.         root: {  
  26.             nodeType: 'async',  
  27.             text:'选择类别' ,  
  28.             iconCls:''         
  29.         },//loader 引用插件TreeCheckNodeUI，实现单选功能  
  30.       loader: new Ext.tree.TreeLoader({  
  31.         dataUrl: 'categorycheckjson.action?productid='+document.getElementById('productid').value,  
  32.       baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加 uiProvider 属性  
  33.       }),  
  34.           
  35.         buttons: [{  
  36.             text: '指派种类',  
  37.             handler: function(){  
  38.                 var categoryId = '', selNodes = tree.getChecked();  
  39.                 var productid=document.getElementById('productid').value;  
  40.                 if(selNodes.length==0){  
  41.                 Ext.Msg.alert('提示','请选择指派种类');  
  42.                 }  
  43.                 Ext.each(selNodes, function(node){  
  44.                     if(categoryId.length > 0){  
  45.                         categoryId += ', ';  
  46.                     }  
  47.                    // msg += node.text;  
  48.                     categoryId += node.attributes['categoryId'];  
  49.                    
  50.                  Ext.MessageBox.confirm("确认","确定指派种类吗？",function(e){  
  51.                 if (e == "yes") {  
  52.       
  53.               //提交到服务器操作  
  54.                  Ext.Ajax.request({   
  55.                             url: 'asignCategory.action',  
  56.                             params: {categoryId:categoryId,productid:productid},  
  57.                             method: 'POST',  
  58.                             dataType:'json',            
  59.                             success:function(form,action){  
  60.                             var obj = Ext.util.JSON.decode(form.responseText);     
  61.                             if(obj.success==true)     
  62.                            {      
  63.                                Ext.Msg.alert('指派成功',obj.msg);     
  64.                                var win = parent.Ext.getCmp('win');  
  65.                                if (win) {win.close();}    
  66.                              }     
  67.                           else    
  68.                             {     
  69.                            //Ext.Msg.alert('提示',obj.errors);     
  70.                               Ext.Msg.alert('指派错误',obj.msg);     
  71.                               }       
  72.                             },  
  73.                             //提交失败的回调函数  
  74.                             failure:function(){                             
  75.                                  Ext.Msg.alert('错误','服务器出现错误请稍后再试！');  
  76.                             }  
  77.                           });  
  78.              
  79.                 } else if (e == "no") {  
  80.                  // alert("no");  
  81.                 } else if (e == "cancel") {  
  82.                   //alert("cancel");         
  83.                 }});  
  84.                      
  85.                 });  
  86.             }  
  87.         },{  
  88.             text: '关闭',  
  89.             handler: function(){  
  90.               var win = parent.Ext.getCmp('win');  
  91.           //  alert(win2);  
  92.             if (win) {win.close();}    
  93.           //  window.parent.location.href='roleGrid.action'  
  94.             }  
  95.         }]  
  96.     });  
  97.     tree.getRootNode().expand(true);  
  98.      tree.root.getUI().getIconEl().src ='';  
  99. //'js/ext/icons/fam/book.png';     
  100.       
  101.     /  
  102.       
  103. });  



其中 json格式： 
Java代码   收藏代码
  1. stcCallback1001({totalCount:"8",results:[{productid:"13",name:"考试",companyName:"教育",create_time:"2012-08-06 16:14:32"},{productid:"12",name:"ggg",companyName:"4546",create_time:"2012-08-06 16:13:29"},{productid:"11",name:"3434",companyName:"3444",create_time:"2012-08-06 16:12:44"},{productid:"10",name:"333",companyName:"fff",create_time:"2012-08-06 16:12:02"},{productid:"9",name:"考试",companyName:"教育",create_time:"2012-08-06 16:10:53"},{productid:"8",name:"999",companyName:"教育",create_time:"2012-08-06 16:09:36"},{productid:"7",name:"考试",companyName:"教育",create_time:"2012-08-06 16:08:20"},{productid:"6",name:"学",companyName:"教育",create_time:"2012-08-06 15:50:26"}]});  
stefshawn
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs 可编辑的表格树 Ext.tree.ColumnTree Ext.tree.ColumnTreeEditor
07-20
extjs 可编辑的表格树，每个单元格自定义编辑组件，可以自适应列宽，只有源码与例子，运行实例要修改路径，不然图片不能显示，注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo ： codeme9@gmail.com
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
12-11
具体代码如下所示： Ext.define('AM.view.test.ReceiptList', { extend: 'Ext.grid.Panel', alias: 'widget.receiptlist', id : 'receiptlist', selModel : { selType : 'checkboxmodel', ...
Extjs3.4中TreePanel含复选框树选中状态级联处理详解（含半选）
第三眼的思绪
09-10 1570
这里讨论TreePanel树含复选框且允许半选状态存在方式，当选中某节点时时，向上和向下的选中情况处理。在允许含半选的情况下，在异步动态获取节点数据时，通常都会在返回节点JSON数组数据中包含indeterminate属性。这里需要注意的是：当json数据对象中indeterminate为true时，无论checked为true或false，对应的节点初始化时都会显示为半选状态，并且节点属性che...
extjs3.4 ComboBoxTree高级实现
henry
06-01 1851
ComboBoxTree.js ComboBoxTree = Ext.extend(Ext.form.ComboBox,{ callback : Ext.emptyFn, store : new Ext.data.SimpleStore({ fields : [], data : [ {} ], }), editable
自己写ExtJS 4控件： Combobox内嵌入Tree
hanqing
06-19 3860
Combobox内嵌入Tree，网上很多代码，但大多属于ExtJS 2或ExtJS 3，我没有找到适用于ExtJS 4的代码，由于ExtJS 4变化蛮大，所以网上的代码都不能直接使用，不过没关系，自己写吧 看了网上的示例代码，其实只要注意几点即可 1、为Combobox的tpl插入一个带有id的div tpl =''   2、写Combobox的expand事件
ExtJs之treePanel checkbox 复选框
menghuannvxia的专栏
05-14 593
需求 目录树需要实现多级复选的时的应用 1 效果图 代码 1.实现关键—–子节点和父节点的联动 /** 递归遍历父节点 **/ var travelParentChecked = function(node, checkStatus, opts){ //父节点 var upNode = node.parentNode; if(upNode != null){ var opts = {}; opts["isPa
Extjs4.2带复选框下拉树组件
03-11
网上搜索了许久未找到...Extjs4.2 带复选框的下拉树，解决了向下勾选子节点、向上勾选父节点，正选反选获取值等问题，勾选的节点显示displayfield值直接显示在下拉文本框中。需要引用ext-all.js和ext-all-neptune.css
关于extjs treepanel复选框选中父节点与子节点的问题
12-02
在本例中，我们关注的是如何实现一个带有复选框的TreePanel，以便在选中父节点时自动选中所有子节点，而只有当所有子节点都未被选中时，父节点才能被取消选中。 首先，我们创建了一个新的Ext.tree.TreePanel实例，...
Extjs 点击复选框在表格中增加相关信息行
11-26
首先，我们需要创建一个复选框组（CheckboxGroup）来显示可供选择的省份。在这个例子中，`$provinceCheckbox01`是一个复选框组，它通过监听`change`事件来响应用户的选择变化。 接下来，定义了一个名为`gridItems`...
extjs3.X 带复选框的树
03-28
"带复选框的树"是ExtJS中的TreePanel组件的一个扩展，允许用户通过复选框选择树结构中的节点。这种功能在数据层级结构的管理和筛选中非常有用，例如在组织架构、文件系统或者权限设置中。 复选框树的核心在于`...
两款带复选框的树形结构
10-28
找了很久的两款简单易用的jquerytree，适用很多开发环境
带复选框的树形菜单-
02-23
带复选框的树形菜单，支持无限层级、绝对好用，有文档、有事例~功能非常强大
JQuery 简单的带复选框的树形结构
11-15
其实关于树形结构图，网上有很多插件，已经把全套的都封装好了的；但是最近公司需要做一个带复选框的树形结构，并且最关键的是要嵌入到JSP页面中，传递的数据不是用JSON传递的，是直接通过后端跳JSP页面的方式来的，所以就没有用网上的插件，就自己写了一下简单的实现。
layui扩展组件之树形下拉多选组件
12-19
//LayUI扩展组件之treeselect.js by:Van 这是一个基于ztree.js和layui扩展的树形下拉多选组件
js 静态树形结构(包含有复选框和无复选框)
12-02
这个树的组件主要有： 几个js文件 1个css文件 用户自己的数据文件，可以搞成js文件形式，也可以在java程序中写好，传给jsp。
extjs CheckTree 的相关应用
软件维修师
01-28 3399
var tree= new Ext.tree.TreePanel({        id:'ptree',        region:'west',        layout:'anchor',        border:false,        rootVisible: false,        root:{},        listeners:{ render: functio...
带复选框的Extjs树
pengpeng11的专栏
06-18 171
很多时候我们需要用到带checkbox的树。 其实加个checkbox框先简单，只需要在返回来的json数据中加上 checked 项（为true/false）。要实现我们想要的选中父节点的checkbox后，自动选中子节点也很简单，只需要加上下面这一段代码就可以了。 [code="js"] tree.on('checkchange', function(node, checked) { ...
ExtJS带复选框的下拉树对复选框中半选状态的实现
weixin_34226706的博客
10-28 369
2019独角兽企业重金招聘Python工程师标准>>> ...
extjs表格实现复选框的代码
最新发布
03-07
以下是实现 extjs 表格复选框的代码示例： 1. 在列模型中添加一个复选框列： ``` { xtype: 'checkcolumn', header: '选择', dataIndex: 'selected', width: 50, editor: { xtype: 'checkbox', cls: 'x-grid...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值