<link rel="stylesheet" type="text/css" href="/js/ext-2.3.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/js/ext-2.3.0/resources/css/xtheme-gray.css" />
<script type="text/javascript" src="/js/ext-2.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext-2.3.0/ext-all.js"></script>
<!-- Files needed for SwfUploaderPanel -->
<SCRIPT LANGUAGE="JavaScript">
var Tree_Dept;
var Tree_Dept_Loader;
var checkchange = false;
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = '/js/extjs/resources/images/default/s.gif';
//级联选择设置
var cascadeCheckBox = new Ext.form.Checkbox({
id: "cascadeBt",
boxLabel : '级联选择'
});
cascadeCheckBox.on('check', cascadeSelectSet);
// Define Tree.
Tree_Dept_Loader = new Ext.tree.TreeLoader({
baseParams:{"nodeids":'<%=nodeids%>'},
dataUrl :"DeptTreeData.jsp"
});
//lable 21409:具有创建权限的目录
Tree_Dept = new Ext.tree.TreePanel({
collapsible : false,
animCollapse : false,
border : true,
el :'tree',
autoScroll : true,
animate : false,
containerScroll : true,
height : 400,
rootVisible : true,
loader : Tree_Dept_Loader,
tbar: [{
id: "submit_button",
xtype:"button",
handler: onGetChecked,
text:"确定"
},{ //清除所有选中的部门节点
id: "clear_button",
xtype:"button",
handler: clearAll,
text:"清除所选项"
},{ //选中当前被选中的同层级的所有节点
id: "samelv_button",
xtype:"button",
handler: sameLvSelectSet,
text:"同层级全选"
},{ //重置
id: "reload_button",
xtype:"button",
handler: reloadData,
text:"重置"
},'-',cascadeCheckBox]
});
// SET the root node.
//lable 1478: 目录信息
//组织部门树
var Tree_Dept_Root = new Ext.tree.AsyncTreeNode({
text : '组织部门',
draggable : false,
id : 'root^-^0' //root main sub
});
Tree_Dept.setRootNode(Tree_Dept_Root);
Tree_Dept.on('checkchange', function(node, checked) {
node.attributes.checked = checked;
checkchange = true;
document.getElementById("selectid").value = node.id;
});
Tree_Dept.on('click', function(node, checked) {
if (node.attributes.checked == false)
{
node.ui.toggleCheck(true);
node.attributes.checked = true;
}
else
{
node.ui.toggleCheck(false);
node.attributes.checked = false;
}
document.getElementById("selectid").value = node.id;
});
Tree_Dept.on("expand", function(Tree_Dept){
var tobjs=Tree_Dept.getChecked();
if (tobjs.length > 0)
{
var node = tobjs[tobjs.length-1];
node.select();
}
});
Tree_Dept.render();
Tree_Dept_Root.expand();
});
function onGetChecked()
{
try
{
var nodeids="";
var actionids = "";
var nodenames = "";
var tobjs=Tree_Dept.getChecked();
for(var i = 0;i<tobjs.length;i++)
{
var obj = tobjs[i];
nodenames += (nodenames=="")?obj.text:(";"+obj.text);
var splitstr = "^-^";
var nodeid = obj.id;
var pos = nodeid.indexOf(splitstr);
if(pos!=-1)
{
var idsarray = nodeid.split(splitstr);
var type=idsarray[0];
var content=idsarray[1];
nodeids += (nodeids=="")?content:(","+content);
}
}
document.getElementById("nodenames").value=nodenames;
document.getElementById("nodeids").value=nodeids;
//document.getElementById("checkchange").value = "1";
//alert(nodenames);
//alert(nodeids);
}
catch(e)
{
}
}
function clearAll()
{
var tobjs=Tree_Dept.getChecked();
var node;
for(var i = 0;i<tobjs.length;i++)
{
var obj = tobjs[i];
var nodeid = obj.id;
node = Tree_Dept.getNodeById(nodeid);
node.ui.toggleCheck(false);
node.attributes.checked = false;
}
document.getElementById("selectid").value = "";
}
function sameLvSelectSet()
{
var currentid = document.getElementById("selectid").value;
if ("" == currentid || "undefined" == currentid)
{
alert("请选择一个部门!");
return;
}
var node = Tree_Dept.getNodeById(currentid);
var parentNode = node.parentNode;
parentNode.eachChild(function(child){
child.ui.toggleCheck(true);
child.attributes.checked = true;
});
}
function cascadeSelectSet(obj, checked)
{
if (checked)
{
Tree_Dept_Loader.dataUrl = "DeptTreeData.jsp?isCascade="+true;
}
else
{
Tree_Dept_Loader.dataUrl = "DeptTreeData.jsp?isCascade="+false;
}
}
function collapseAllSet()
{
Tree_Dept.collapseAll();
}
function reloadData()
{
Tree_Dept.getRootNode().reload();
}
function setFocus()
{
var tobjs=Tree_Dept.getChecked();
if (tobjs.length > 0)
{
var node = tobjs[tobjs.length-1];
node.select();
}
}
</script>
后台:
String nodeids=Util.null2String(request.getParameter("nodeids"));
String isCascade=Util.null2String(request.getParameter("isCascade"));
String node=Util.null2String(request.getParameter("node"));
String arrNode[]=Util.TokenizerString2(node,"^-^");
String type=arrNode[0];
String value=arrNode[1];
JSONArray jsonArrayReturn= new JSONArray();
if("root".equals(type)){ //主目录下的数据
rs.executeSql(".....");
String nodeId="";
String nodeName="";
String tempNodeId = "";
while(rs.next()){
nodeId=rs.getString("id");
nodeName=rs.getString("departmentname");
tempNodeId = "," + nodeId + ",";
JSONObject jsonTypeObj=new JSONObject();
jsonTypeObj.put("id","node^-^"+nodeId);
jsonTypeObj.put("text",nodeName);
jsonTypeObj.put("cls","folder");
jsonTypeObj.put("draggable",false);
jsonTypeObj.put("leaf",false);
jsonTypeObj.put("expanded",false);
jsonTypeObj.put("checked",false);
jsonArrayReturn.put(jsonTypeObj);
}
} else if ("node".equals(type)){
rs.executeSql("....");
String nodeId="";
String nodeName="";
String tempNodeId = "";
while(rs.next()){
nodeId=rs.getString("id");
nodeName=rs.getString("departmentname");
tempNodeId = "," + nodeId + ",";
JSONObject jsonTypeObj=new JSONObject();
jsonTypeObj.put("id","node^-^"+nodeId);
jsonTypeObj.put("text",nodeName);
jsonTypeObj.put("cls","folder");
jsonTypeObj.put("draggable",false);
jsonTypeObj.put("leaf",false);
jsonTypeObj.put("expanded",false);
if ("true".equals(isCascade)
jsonTypeObj.put("checked",true);
else
jsonTypeObj.put("checked",false);
jsonArrayReturn.put(jsonTypeObj);
}
}
out.println(jsonArrayReturn.toString());
分享到:
相关推荐
在EXTJS中,`checkboxgroup` 是一个用于创建一组复选框的组件,通常用于让用户在多个选项中进行多选。 在EXTJS中,`checkboxgroup` 的配置项包括但不限于: 1. `xtype`: 这个属性定义了组件的类型,对于`checkbox...
标题中的“EXTJS动态树支持checkbox全选”指的是EXTJS中树组件的一个特性,即在树形结构中添加复选框(checkbox)功能,并支持全选和全取消选中操作。这样的功能对于需要用户进行多项选择的场景非常有用,比如文件...
ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件,它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景,比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...
在ExtJS中,树形组件(TreePanel)是一个常用的功能,用于展示层次结构的数据。当树形组件结合复选框时,可以实现用户对节点的选择操作,如全选、反选、子选父以及父选子。这些功能在数据管理、权限分配等场景中非常...
在ExtJS中,CheckboxGroup是一个控件,允许用户以多选框的形式展示一组可选的选项。动态读写Checkboxgroup涉及了对用户交互的响应以及数据的实时更新,这对于创建交互性强、用户友好的界面至关重要。下面将详细讲解...
8. **API配置**:使用ExtJS API可以进一步定制组件的行为,如设置默认展开级别(`rootVisible`)、禁用特定节点(`disabled`)、控制是否显示复选框(`checkbox`)等。 9. **交互设计**:优化用户体验是关键,如...
在本文中,我们将探讨如何实现ExtJS动态树以及其中的节点拖拽功能。动态树是一种能够实时更新和修改的树形结构,允许用户添加、删除和移动节点。这种功能在各种应用场景中非常有用,如文件系统、组织结构或层级数据...
EXTjs2 的treeNode 带有checkbox,可是API中,关于checkbox的事件就只有一个checkchange事件,所以写个方法传上来。
Extjs 模拟下拉多选checkbox
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....
Extjs3.0 中的CheckboxGroup默认不能动态添加item。虽然它继承了Ext.form.Field,但是却类似于容器。 CheckboxGroup配置中的items处理生成一个对应的panel,该处理过程只有一次,所以很难对CheckboxGroup进行动态...
在ExtJS中,Checkbox Tree是一种特殊的树形组件,它允许用户通过复选框选择树结构中的节点。这个"checkbox tree extjs2"主题主要涉及如何在ExtJS 2版本中实现带有复选框功能的树形控件。 在ExtJS 2中,Checkbox ...
它提供了丰富的用户界面组件,如表格、表单、树形视图、菜单等,以及一套完整的MVC(模型-视图-控制器)架构,帮助开发者组织代码和处理用户交互。在Ext Google Map框架中,ExtJs负责创建交互式的地图界面和管理用户...
在网上下载别人的代码,改进加上CHECKBOX ,但是批量删除做不出来,希望高手完成并分享。
在ExtJS库中,Tree组件允许我们展示和操作数据以树形结构显示,而级联选择功能则意味着当用户选择一个节点时,它的所有子节点也会被自动选中,反之亦然,如果取消选中父节点,其所有子节点也将被取消选中。...
在EXTJS 2.2版本中,Tree Panel是EXTJS框架中用于展示树形结构数据的一个组件,但原生的EXTJS 2.2并未提供内置的复选框(checkbox)功能,这对于需要用户进行多选操作的场景来说是一个限制。标题提到的“解决extjs...
在EXTJS这个强大的JavaScript框架中,用户界面的交互设计是其一大亮点,其中包括各种各样的控件,如复选框(checkboxes)和全选功能。然而,在实际应用中,我们可能会遇到一个问题:当实现全选功能后,如果尝试取消...
Extjs checkboxgrop动态获取后台数据,并默认为全选状态
日期用Extjs自带的Ext.form.field.Date,时间用Ext.form.field.Number和Ext.form.Label进行组装。 样式显示为横向的日期、时间,非日期弹出框下方选择日期。 调用代码:Ext.create('erp.ux.form.field.DateTimer', {...