Extjs3.4 带复选框的树结构（Tree+checkbox）案例
框架为struts2
1. jsp页面：
2.categorychecktree.js
其中 json格式：
1. jsp页面：
Java代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <%@taglib prefix="s" uri="/struts-tags"%>
- <%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>种类指派</title>
- <!-- ExtJS library -->
- <link rel="stylesheet" type="text/css" href="css/ext/ext-all.css" />
- <script type="text/javascript" src="js/ext/ext-base.js"></script>
- <script type="text/javascript" src="js/ext/ext-all.js"></script>
- <script type="text/javascript" src="js/ext/edittree/categorychecktree.js"></script>
- <script type="text/javascript" src="js/ext/edittree/TreeCheckNodeUI.js"></script>
- <script type="text/javascript" src="js/ext/examples.js"></script>
- <link href="css/ext/ext-patch.css" type="text/css" rel="stylesheet"/>
- <!-- Common Styles for the examples -->
- <link rel="stylesheet" type="text/css" href="css/ext/examples.css" />
- <style type="text/css">
- .complete .x-tree-node-anchor span {
- text-decoration: line-through;
- color: #777;
- }
- .x-tree-node .root{
- background-image: url(css/images/default/tree/category.png)
- }
- </style>
- </head>
- <body style="padding:0 0 0 ;">
- <!-- EXAMPLES -->
- <div id="tree-div" ></div>
- <input type="hidden" id="name" name="name" value='<s:property value="product.name"/>'/>
- <input type="hidden" id="productid" name="productid" value='<s:property value="productid"/>'/>
- </body>
- </html>
2.categorychecktree.js
Java代码
- /*!
- * Ext JS Library 3.4.0
- * Copyright(c) 2006-2011 Sencha Inc.
- * [email protected]
- * http://www.sencha.com/license
- */
- Ext.onReady(function(){
- var tree = new Ext.tree.TreePanel({
- renderTo:'tree-div',
- // title: document.getElementById('name').value+'——>指派种类',
- align:'center',
- height: 300,
- width: 400,
- useArrows:true,
- autoScroll:true,
- animate:true,
- // enableDD:true,拖拽
- containerScroll: true,
- expanded:true,
- rootVisible: false,
- checkModel:'single',
- onlyLeafCheckable:true,
- frame: true,
- root: {
- nodeType: 'async',
- text:'选择类别' ,
- iconCls:''
- },//loader 引用插件TreeCheckNodeUI，实现单选功能
- loader: new Ext.tree.TreeLoader({
- dataUrl: 'categorycheckjson.action?productid='+document.getElementById('productid').value,
- baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加 uiProvider 属性
- }),
- buttons: [{
- text: '指派种类',
- handler: function(){
- var categoryId = '', selNodes = tree.getChecked();
- var productid=document.getElementById('productid').value;
- if(selNodes.length==0){
- Ext.Msg.alert('提示','请选择指派种类');
- }
- Ext.each(selNodes, function(node){
- if(categoryId.length > 0){
- categoryId += ', ';
- }
- // msg += node.text;
- categoryId += node.attributes['categoryId'];
- Ext.MessageBox.confirm("确认","确定指派种类吗？",function(e){
- if (e == "yes") {
- //提交到服务器操作
- Ext.Ajax.request({
- url: 'asignCategory.action',
- params: {categoryId:categoryId,productid:productid},
- method: 'POST',
- dataType:'json',
- success:function(form,action){
- var obj = Ext.util.JSON.decode(form.responseText);
- if(obj.success==true)
- {
- Ext.Msg.alert('指派成功',obj.msg);
- var win = parent.Ext.getCmp('win');
- if (win) {win.close();}
- }
- else
- {
- //Ext.Msg.alert('提示',obj.errors);
- Ext.Msg.alert('指派错误',obj.msg);
- }
- },
- //提交失败的回调函数
- failure:function(){
- Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
- }
- });
- } else if (e == "no") {
- // alert("no");
- } else if (e == "cancel") {
- //alert("cancel");
- }});
- });
- }
- },{
- text: '关闭',
- handler: function(){
- var win = parent.Ext.getCmp('win');
- // alert(win2);
- if (win) {win.close();}
- // window.parent.location.href='roleGrid.action'
- }
- }]
- });
- tree.getRootNode().expand(true);
- tree.root.getUI().getIconEl().src ='';
- //'js/ext/icons/fam/book.png';
- /////////////////////////
- });
其中 json格式：
Java代码
- 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"}]});