dhtmlx组件是一个JavaScript 库,提供了一套完整的Ajax驱动的UI 组件。使用 dhtmlxSuite 生成企业级 web 应用程序有干净的界面、 快速的性能和丰富的用户体验。
dhtmlx组件是由位于俄罗斯圣彼得堡的DHTMLX公司开发的,适用于B/S模式的Web应用开发。
dhtmlx是一个比较成熟全面的前端控件,比如dhtmlxCombo、dhtmlxEdito、dhtmlxMenu、dhtmlxTabBar、dhtmlxToolbar、dhtmlxTree、dthtmlxFrom、dhtmlxGrid、dhtmlxWindows和dhtmlxLayout等一些控件。其中dhtmlxForm又包含了很多小控件,例如:dhtmlxEditor(富文本编辑器)、dhtmlxCalendar(日期控件)等等。这里就不一一列举。
下面是我做的一个简单例子,项目的数据持久层使用DBUtils框架实现,action使用dom4j转成文档,DBUtils是一个非常轻量级的数据持久层框架
-
实体类
public class Department {
private int id; //ID
private String dpname; // 部门名称
private int parentid; // 父节点ID
//省略get、set方法
}
- 数据持久层接口
public interface DepartmentDao {
List<Department> selectListDepartments();
}
- 数据持久层实现类
public class DepartmentDaoImpl implements DepartmentDao{
@Override
public List<Department> selectListDepartments() {
List<Department> list = new ArrayList<Department>();
queryRunner = new QueryRunner(ds);
String sql = "select * from Department";
try {
list = queryRunner.query(sql, new BeanListHandler<Department> (Department.class));
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
private DataSource ds;
private QueryRunner queryRunner;
//省略get、set方法
}
- 业务逻辑层接口
public interface DepartmentService {
/**
* 拼装xml树结构字符串
*
* @return
*/
String selectListTreeDepartments();
}
- 业务逻辑层实现类
public class DepartmentServiceImpl implements DepartmentService {
@Override
public String selectListTreeDepartments() {
// 获取所有的部门
List<Department> list = departmentDao.selectListDepartments();
String str = ForeachXml(list);
return str;
}
/**
* 拼装xml树结构字符串
*
* @param list
* @return
*/
public String ForeachXml(List<Department> list) {
String xml = "";
StringBuffer buffer = new StringBuffer(
"<?xml version='1.0' encoding='iso-8859-1'?><tree id='0'>");
if (list != null && list.size() > 0) {
for (int i = 0; i < list.size(); i++) {
Department department = list.get(i);
if (department.getParentid() == 0) {
//调用拼接子节点函数
StringBuffer sgBuffer = getXmlBuffer(list, department);
buffer.append("<item text='" + department.getDpname() + "' id='" + department.getId() + "' open='1' im0='iconTexts.gif' im1='folderOpen.gif' im2='folderClosed.gif' call='1'>").append(sgBuffer).append("</item>");
}
}
}
buffer.append("</tree>");
xml = buffer.toString();
return xml;
}
/**
* 子节点数据拼接xml格式字符
*
* @param list
* @param dp
* @return
*/
public StringBuffer getXmlBuffer(List<Department> list, Department dp) {
List<Department> ltus = new ArrayList<Department>();
for (int j = 0; j < list.size(); j++) {
Department dt = list.get(j);
if (dt.getParentid() == dp.getId()) {
ltus.add(dt);
}
}
StringBuffer buffer = new StringBuffer();
if (ltus != null && ltus.size() > 0) {
for (int i = 0; i < ltus.size(); i++) {
Department dt = ltus.get(i);
// 递归
StringBuffer sgBuffer = getXmlBuffer(list, dt);
if (sgBuffer.length() > 0) {
buffer.append("<item text='" + dt.getDpname() + "' id='" + dt.getId() + "' im0='iconTexts.gif' im1='folderOpen.gif' im2='folderClosed.gif'>").append(sgBuffer).append("</item>");
} else {
buffer.append("<item text='" + dt.getDpname() + "' id='" + dt.getId() + "' im0='iconTexts.gif' im1='folderOpen.gif' im2='folderClosed.gif'/>");
}
}
}
return buffer;
}
private DepartmentDao departmentDao;
//省略get、set方法
}
- Action
public class DepartmentAction {
/**
* 生成XML格式数据
*
* @return
*/
public String testTree() {
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/xml;charset=UTF-8");
response.setHeader("cache-control", "no-cache");
String xml = departmentService.selectListTreeDepartments();
PrintWriter out = null;
try {
out = response.getWriter();
} catch (IOException e2) {
e2.printStackTrace();
}
OutputFormat format = OutputFormat.createPrettyPrint();
format.setEncoding("GBK");
XMLWriter writer = new XMLWriter(out, format);
try {
Document document = DocumentHelper.parseText(xml);
writer.write(document);
} catch (IOException e1) {
e1.printStackTrace();
} catch (DocumentException e) {
e.printStackTrace();
}
out.flush();
out.close();
return null;
}
private DepartmentService departmentService;
// 省略get、set方法
}
dhtmlx控件都是异步加载数据,只需要把action的地址赋值给dhtmlxTree控件的loadXML方法