下列程序主要是利用EXTJS的tree对LDAP中的数据进行一层层list出现,显示为一个树状。有点类似Softerra LDAP的结构。可以添加类似的操作,比如:修改、拖拽等等。在这就没列出了。程序用到了Spring-Ldap 所以需要相应的包。extjs用的是2.3.0;
树的js代码
buildUnitTree=function(){
//定义根节点的Loader
// var treeloader=new Tree.TreeLoader({dataUrl:'unit.do?m=unitTree'});
//异步加载根节点
var rootnode=new Ext.tree.AsyncTreeNode({
id:'',
text:'目录树根节点',
expandable :true
});
var treepanel = new Ext.tree.TreePanel({
//renderTo:"tree_div",//如果使用renderTo,则不能使用setRootNode()方法,需要在TreePanel中设置root属性。
el:'unit_tree', //填充区域
rootVisible:true, //隐藏根节点
border:true, //边框
animate:false, //动画效果
autoScroll:true, //自动滚动
enableDD:false, //拖拽节点
checkModel: 'cascade', //对树的级联多选
onlyLeafCheckable: false,//对树所有结点都可选
containerScroll:true,
rootVisible : false,
root: rootnode,
loader:
new Ext.tree.TreeLoader({
dataUrl:"tree.jsp",
baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI }
})
});
//设置根节点
treepanel.setRootNode(rootnode);
//响应事件,传递node参数
treepanel.on('beforeload',
function(node){
treepanel.loader.dataUrl='unit.do?m=unitTree&parentId='+node.id; //定义子节点的Loader
});
treepanel.on('beforeexpandnode',function(node){//展开时在gird加载对应的数据数据
buildUnitGrid(node.id);
});
treepanel.on('beforecollapsenode',function(node){//当点击收起来的时候在grid加载上一层的数据
buildUnitGrid(node.parentNode.id);
});
treepanel.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
treepanel.on('checkchange', function(node, checked) {
//Ext.MessageBox.alert(buildUnitGrid(node.id));
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
});
});
treepanel.on('click',function(node){//单击树的一个节点 grid显示该节点的单位信息
gridPanel.store.proxy=new Ext.data.HttpProxy({url:"unit.do?m=viewUnit&id="+node.id});
gridPanel.store.load();
gridPanel.render();
});
treepanel.render();
treepanel.getRootNode().expand();
}
var gridPanel;
buildUnitGrid=function(parentId){
var cbsm=new Ext.grid.CheckboxSelectionModel({dataIndex:"id"});//定义复选框
var store=new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:"unit.do?m=unitList&parentId="+(parentId==undefined?null:parentId)}),
reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"root"},
["id",
"name",
"address",
"phone",
{name : 'createDate', type : 'date', mapping : 'createDate.time', dateFormat : 'time' } ,
"comm"])
});//定义数据源
store.load();//加载数据
var colm=new Ext.grid.ColumnModel([//定义列
new Ext.grid.RowNumberer(),
cbsm,
{ id:'id',header: "id", sortable: true, dataIndex: 'id',hidden:true},
{header:"单位名",sortable:false,dataIndex:"name"},
{header: "单位地址",sortable: false, dataIndex: 'address'},
{header: "单位电话",sortable: false, dataIndex: 'phone'},
{header: "创建时间", sortable: true, dataIndex: 'createDate',renderer:Ext.util.Format.dateRenderer('Y年m月d日')},
{header: "备注", sortable:false, renderer: Ext.util.Format.ellipsis(".",30), dataIndex: 'comm'},
{header:"操作",dataIndex:'id',renderer:operation}
]);
// var pageBar=new Ext.PagingToolbar({ //定义分页条
// pageSize: 10,
// store: store,
// displayInfo: true,
// displayMsg: '第{0} 到 {1} 条数据 共{2}条',
// emptyMsg: "没有数据"
// });
gridPanel=new Ext.grid.GridPanel({
store:store,
cm:colm,
sm:cbsm,
width:'60%',
autoHeight:true,
// bbar:pageBar,
// frame:false,
title:'单位列表',
// iconCls:'icon-grid',
autoHeight: true,
el: "unit_grid"
});
gridPanel.render();
}
function operation(value){
var _context='<a onclick="updateUnit('+value+')" style="text-decoration: underline">修改</a> ';
_context+='<a onclick="deleteUnit('+value+')" style="text-decoration: underline">删除</a>';
return _context;
}
用的是jsp来创建json
<%@ page language="java"
import="java.util.*"
import="ldap.connect.*"
import="org.springframework.context.ApplicationContext"
import="org.springframework.context.support.ClassPathXmlApplicationContext"
pageEncoding="utf-8"%>
<%
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String node = request.getParameter("node");
//System.out.println(node);
ApplicationContext ac =
new ClassPathXmlApplicationContext(
"applicationContext.xml");
LdapConnect ldapConnect = (LdapConnect)ac.getBean("userDao");
String json = "";
String id = "";
List list = ldapConnect.getList(node);
if(list.size()==0)
response.getWriter().print(json);
json += "[";
for(int i=0;i<list.size();i++){
//System.out.println(list.get(i));
if(node.length()>1 || !" ".equals(node)){
id = list.get(i)+","+node;
}
else {
id = (String)list.get(i);
}
//System.out.println(id);
json += "{id:'"+id+"',text:'"+list.get(i)+"',qtip:'"+id+"'}";
if(i+1 < list.size())
json += ",";
}
json += "]";
response.getWriter().print(json);
%>
public List getList(String path) {
DistinguishedName dn = null;
if ("".equals(path) || path ==null)
dn = new DistinguishedName();
else
dn = new DistinguishedName(path);
return ldapTemplate.list(dn);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd">
<beans>
<bean id="ldapSource" class="org.springframework.ldap.core.support.LdapContextSource">
<property name="url" value="ldap://localhost:389" />
<property name="base" value="DC=cz8,DC=net" />
<property name="userDn" value="cn=manager,DC=cz8,DC=net" />
<property name="password" value="password" />
</bean>
<bean id="ldapTemplate" class="org.springframework.ldap.core.LdapTemplate">
<constructor-arg ref="ldapSource" />
</bean>
<bean id="userDao" class="ldap.connect.LdapConnect">
<property name="ldapTemplate"><ref bean="ldapTemplate"/></property>
</bean>
</beans>
HTML页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" type="text/css" href="ext-2.3.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-2.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.3.0/ext-all.js"></script>
<script type="text/javascript" src="ext-2.3.0/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="operate.js"></script>
</head>
<body>
<div id="layout"></div>
</body>
</html>
分享到:
相关推荐
Extjs实现的对Ldap的树状结构的显示,结构有点类似Softerra LDAP;一个测试类。 pdf:spring-ldap-reference.pdf Extjs.pdf 非常好的一本关于Extjs的书。 由于这些我也是才入门的时候写的,进行测试等用的,所以...
extjs实现简单的树状结构级联Ext onReady function { Ext QuickTips init ; Ext BLANK IMAGE URL "extjs resources images default s gif"; var mytree new Ext tree TreePanel { el : "...
extjs 进度条的显示
用extjs技术显示表格的信息,不过首先要导入extjs所需的库文件
Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)
最近有些工作上要利用extjs库来做一些东西,最好的ide就是spket IDE 一个非常好js编辑器,可以设置相应的js库,从而得到非常友好的代码提示。 随便工作的展开,越来越多同事问我要怎么设置才能得到ext的代码提示,...
extjs日期显示(如何转换日期格式),亲自试验过的,extjs6中可以使用的
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
extjs资料extjs资料extjs资料extjs资料extjs资料
extjs显示数据库代码,实例。
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
extjs php 在js文件中显示登陆用户的方法
NULL 博文链接:https://swordboy007.iteye.com/blog/1722145
extjs前端开发手册以及结构框架
利用extjs6自带的treePicker插件,实现下拉树的效果
分享给爱好EXTJS的同胞们! EXTJS4.0文件夹下面包括 1.只有年月选择--dateYM.html (这个在EXTJS4.0和4.1下显示都是可以的) 2.扩展日期选择时分秒--dateTimeField4.0.html (这个只在EXTJS4.0下显示可以) ...
EXTJS4自学手册——EXT数据结构组件(创建一个Model) EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互) EXTJS4自学手册——EXT数据结构组件 EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端...
从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从ExtJs5开始则引入了MVVC架构。 从网上资料来看,多数都是停留在ExtJs3...
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...