<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());
分享到:
相关推荐
checkboxgroup中修改时赋值是最难解决的,要改写方法才能实现
ExtJs4 Checkbox tree
通过修改网络上的一个树的例子实现节点的动态加载,还支持checkbox。
checkbox tree extjs2checkbox tree extjs2checkbox tree extjs2checkbox tree extjs2
EXTjs2 的treeNode 带有checkbox,可是API中,关于checkbox的事件就只有一个checkchange事件,所以写个方法传上来。
Extjs 模拟下拉多选checkbox
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....
NULL 博文链接:https://stevelee.iteye.com/blog/1328992
extjs带复选框的树包括全选 反选 子选父以及 父选子 与adf在jsp页面得应用 包含了工具类以及针对extjs树节点增加、删除、修改的工具方法
在网上下载别人的代码,改进加上CHECKBOX ,但是批量删除做不出来,希望高手完成并分享。
该实例实现google map和ExtJs结合开发,实现图层管理、图层可见性控制、图层要素详细信息查看等功能。
此扩展解决 extjs2.2 及以前版本都不支持checkbox的问题
主要介绍了Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法,需要的朋友可以参考下
Extjs checkboxgrop动态获取后台数据,并默认为全选状态
日期用Extjs自带的Ext.form.field.Date,时间用Ext.form.field.Number和Ext.form.Label进行组装。 样式显示为横向的日期、时间,非日期弹出框下方选择日期。 调用代码:Ext.create('erp.ux.form.field.DateTimer', {...
extjs 实现 checkbox 结构树
Extjs3.0中的CheckboxGroup默认不能动态添加item,如需要数据动态创建,试着创建整个CheckboxGroup,而不是动态添加item,具体实现如下,感兴趣的朋友可以了解下
EXTJS4.2 Sencha Architect22 treegrid tree checkbox treegrid tree 通过store显示内容,能够通过checkbox点击勾选 其他功能,网上都能找到,就没有再写
checkbox tree extjscheckbox tree extjscheckbox tree extjscheckbox tree extjscheckbox tree extjscheckbox tree extjscheckbox tree extjscheckbox tree extjs
第五讲.ExtJs最常用表单组件Number、CheckBox、Radio 第六讲.ExtJs最常用表单组件ComboBox、time、date 第七讲.ExtJS面板Panel 第八讲.EXtJS布局模式-Auto布局、Fit布局、Accordion布局 第九讲.ExtJS布局模式-...