最近，一直忙着做公司项目，写博客写的不勤快，挤出一点时间，总结总结近来的各种收获。
最近也是忙得够呛：既要建库建表，写后端代码，又要兼顾前端布局，数据加载。遇到过难点，但是也都很好的克服了。
easyui：
1.下拉选择框的使用：这种功能很常见：传统做法是：从数据库拿数据，包装好后，随页面返回。新做法是：页面加载完后，异步请求获取数据（JSON格式），到指定位置加载。而使用easyui的做法是，用到时再去加载（点击时才加载）。更复杂的是下拉框与框之间存在上下级关系，即先加载A框，选择一个项后，根据这个项的id，去加载B框。，
前端easyui代码：
<td><select class="easyui-combotree" url="/ylitsm/cmdb/c.do" name="city" style="width:156px;"/></td>
<input id="cc1" class="easyui-combobox" data-options="
valueField: 'id',
textField: 'text',
onShowPanel: function(){
if($(this).combobox('getValues')=='')
{
var url = 'e.do';
$('#cc1').combobox('reload', url);
}
},
onSelect:function(rec)
{
var url='d.do?id='rec.id;
$('#cc2').combobox('reload',url);
}" />
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />后台发json数据
@RequestMapping("/d.do")
@ResponseBody
public void d(Model model,HttpServletRequest request,HttpServletResponse response) throws IOException
{
Vector<Map<String,Object>> vs=new Vector<Map<String,Object>>();
Map<String, Object> map=new HashMap<String, Object>();
map.put("id","1");
map.put("text","two");
Map<String, Object> map2=new HashMap<String, Object>();
map2.put("id","2");
map2.put("text","theee");
vs.add(map);
vs.add(map2);
String ztreeOrgUserJson = JSON.toJSONString(vs);
printWriterStringToJson(response, ztreeOrgUserJson);
}
@RequestMapping("/e.do")
@ResponseBody
public void e(Model model,HttpServletRequest request,HttpServletResponse response) throws IOException
{
Vector<Map<String,Object>> vs=new Vector<Map<String,Object>>();
Map<String, Object> map=new HashMap<String, Object>();
map.put("id","1");
map.put("text","four");
Map<String, Object> map2=new HashMap<String, Object>();
map2.put("id","2");
map2.put("text","five");
vs.add(map);
vs.add(map2);
String ztreeOrgUserJson = JSON.toJSONString(vs);
printWriterStringToJson(response, ztreeOrgUserJson);
}</pre><pre code_snippet_id="1864982" snippet_file_name="blog_20160903_4_3920750" class="html" name="code">JSON数据格式： [{"id":"1","text":"four"},{"id":"2","text":"five"}] 务必与 前台设置对应 valueField: 'id', textField: 'text'
2.树形下拉选择框：json数据格式
后台需要拼接的数据格式：
{"children":[{"children":[],"id":"8a8a18d11e820b84011e821579bc0007","pid":"8a8a18d12d5a29e0012d5a9d0d120001","state":"open","text":"路由器"},{"children":[],"id":"8a8a18d11e820b84011e82161976000d","pid":"8a8a18d12d5a29e0012d5a9d0d120001","state":"open","text":"交换机"},{"children":[],"id":"8a8a18d11e820b84011e82172a1b0019","pid":"8a8a18d12d5a29e0012d5a9d0d120001","state":"open","text":"网关"},{"children":[],"id":"8a8a18d11e820b84011e821835fd0025","pid":"8a8a18d12d5a29e0012d5a9d0d120001","state":"open","text":"Modem"},{"children":[],"id":"8a8a18d12d5a29e0012d5a9f01e40002","pid":"8a8a18d12d5a29e0012d5a9d0d120001","state":"open","text":"负载均衡"}],"id":"8a8a18d12d5a29e0012d5a9d0d120001","state":"open","text":"网络设备"},{"children":[{"children":[],"id":"8a8a18d11e820b84011e821b11120031","pid":"8a8a18d12d5a29e0012d5aa022730003","state":"open","text":"磁带库"},{"children":[],"id":"8a8a18d11e820b84011e821bb08e0037","pid":"8a8a18d12d5a29e0012d5aa022730003","state":"open","text":"磁盘阵列"}],"id":"8a8a18d12d5a29e0012d5aa022730003","state":"open","text":"存储设备"},{"children":[{"children":[],"id":"8a8a18d11e820b84011e8216b6140013","pid":"8a8a18d12d5a29e0012d5aa14d3f0004","state":"open","text":"防火墙"},{"children":[],"id":"8a8a18d12d5a29e0012d5aa237f70005","pid":"8a8a18d12d5a29e0012d5aa14d3f0004","state":"open","text":"加密机"}],"id":"8a8a18d12d5a29e0012d5aa14d3f0004","state":"open","text":"安全设备"},{"children":[{"children":[],"id":"8a8a18d11e820b84011e821d0d5f003d","pid":"8a8a18d12d5a29e0012d5aa2e0240006","state":"open","text":"空调"},{"children":[],"id":"8a8a18d11e820b84011e821db3c00043","pid":"8a8a18d12d5a29e0012d5aa2e0240006","state":"open","text":"电源"},{"children":[],"id":"8a8a18d11e820b84011e821e64920049","pid":"8a8a18d12d5a29e0012d5aa2e0240006","state":"open","text":"机柜"},{"children":[],"id":"8a8a18d11e820b84011e82207cf30067","pid":"8a8a18d12d5a29e0012d5aa2e0240006","state":"open","text":"KVM"},{"children":[],"id":"8a8a18d12d5a29e0012d5aa7b4370008","pid":"8a8a18d12d5a29e0012d5aa2e0240006","state":"open","text":"配线架"}],"id":"8a8a18d12d5a29e0012d5aa2e0240006","state":"open","text":"机房设备"},{"children":[{"children":[],"id":"8a8a18d11e820b84011e821f9e99005b","pid":"8a8a18d12d5a29e0012d5aa439bc0007","state":"open","text":"打印机"},{"children":[],"id":"8a8a18d11e820b84011e822029160061","pid":"8a8a18d12d5a29e0012d5aa439bc0007","state":"open","text":"扫描仪"},{"children":[],"id":"ff8081812d633cf4012d6438b5230024","pid":"8a8a18d12d5a29e0012d5aa439bc0007","state":"open","text":"复印机"}],"id":"8a8a18d12d5a29e0012d5aa439bc0007","state":"open","text":"办公设备"},{"children":[{"children":[],"id":"8a8a18d11e820b84011e821ebd22004f","pid":"8a8a18d12d5a29e0012d5aa862a50009","state":"open","text":"台式机"},{"children":[],"id":"8a8a18d11e820b84011e821f1eda0055","pid":"8a8a18d12d5a29e0012d5aa862a50009","state":"open","text":"笔记本"}],"id":"8a8a18d12d5a29e0012d5aa862a50009","state":"open","text":"桌面"}]
如何拼接成这样的数据呢？
第一步：得有个容器去装数据：分析一下数据格式：可得到如下的数据结构：
public class EasyUitreeObject {
private String id;
private String text;
private String state;
private String pid;
private List <EasyUitreeObject>children;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
public List<EasyUitreeObject> getChildren() {
return children;
}
public void setChildren(List<EasyUitreeObject> children) {
this.children = children;
}
}
/**
*
*author:cwy
*说明:cmdb之类别树
*参数：
* @param response
* @throws IOException
*/
@RequestMapping("/categorytree.do")
public void getcategorytree(HttpServletResponse response) throws IOException
{
String companyId=SpringContextUtil.getUser().getCompanyId();
//获取配置项数据,包括父子节点
List<Itsm_ci_category> ls=this.itsm_ci_categoryService.findListByHql("from Itsm_ci_category where mwr_code=? and companyid=?","CICATEGORY",companyId);
List<EasyUitreeObject> ztreeList=new ArrayList<EasyUitreeObject>();
for(int i=0;i<ls.size();i++) //数据装进easytree中
{
Itsm_ci_category icc=ls.get(i);
EasyUitreeObject jsontree=new EasyUitreeObject ();
jsontree.setId(icc.getResourceid());
jsontree.setText(icc.getName());
jsontree.setPid(icc.getParent());
jsontree.setState("open");
ztreeList.add(jsontree);
}
List<EasyUitreeObject> newTreeDataList =EasyUiTreeUtill.getfatherNode(ztreeList); //装配easytree为树形状
String ztreeOrgUserJson = JSON.toJSONString(newTreeDataList); // 转化为ztree对象
printWriterStringToJson(response, ztreeOrgUserJson);
}从数据库获取一堆数据，每条数据都有id和他的父id，假设只有一个根节点，那么我们就得先从这堆数据中找到最顶层的节点：遍历每一个节点的父Id,跟id对比，父id在id中找不到则说明这是根节点（此结论只成立于一堆数据只有一个根节点）。获取根节点后，使用递归的方式找到他的树枝。
具体上代码：
public class EasyUiTreeUtill {
/**
*
*author:cwy
*说明:根点为null,通过此方法可以将list转为easyuitree格式的list，最后将这个list转为json，供前台easyui 下拉选择树控件使用
*参数：
* @param treeDataList
* @return
*/
public final static List<EasyUitreeObject> getfatherNode(List<EasyUitreeObject> treeDataList) {
List<EasyUitreeObject> newTreeDataList = new ArrayList<EasyUitreeObject>();
for (EasyUitreeObject jsonTreeData : treeDataList) {
if(jsonTreeData.getPid()==null) {
//获取父节点下的子节点
jsonTreeData.setChildren(getChildrenNode(jsonTreeData.getId(),treeDataList));
jsonTreeData.setState("open");
newTreeDataList.add(jsonTreeData);
}
}
return newTreeDataList;
}
/**
*
*author:cwy
*说明:通过父节点，和整个List获取字节点List
*参数：
* @param pid
* @param treeDataList
* @return
*/
private final static List<EasyUitreeObject> getChildrenNode(String pid , List<EasyUitreeObject> treeDataList) {
List<EasyUitreeObject> newTreeDataList = new ArrayList<EasyUitreeObject>();
for (EasyUitreeObject jsonTreeData : treeDataList) {
if(jsonTreeData.getPid() == null) continue;
//这是一个子节点
if(jsonTreeData.getPid().equals(pid)){
//递归获取子节点下的子节点
jsonTreeData.setChildren(getChildrenNode(jsonTreeData.getId() , treeDataList));
newTreeDataList.add(jsonTreeData);
}
}
return newTreeDataList;
}
/**
*
*author:cwy
*说明:找出唯一的根节点，若有多个根节点，则取第一个为根节点
*参数：
* @param ls
* @return
*/
public final static String getRoot(List<JsonTreeData> ls)
{
String rootid=null;
int sum=0;
for(int i=0;i<ls.size();i++)
{
for(int j=0;j<ls.size();j++)
{
if(ls.get(i).getPid().equals(ls.get(j).getId())) //父id与所有的id对比，在id中找到,则将标记至0，找不到则加1
{
sum=0;
break;
}
else
{
sum++;
}
}
if(sum==ls.size()) //若找不到，则此节点的父节点是根节点
{
rootid=ls.get(i).getPid();
break;
}
}
return rootid;
}
}
前台：easyui
<td style="width: 210px;">类别：<input id="category" class="easyui-combotree" url="/ylitsm/cmdb/categorytree.do" name="category" style="width:156px;"/></td>
3.下拉框中，不仅仅有数据，还可以编辑，删除，这条数据。做法是使用combogrid：
先设置一个
<span>测试</span><input id="test" style="width:150px"/>然后是js：formatter属性是设置列属性<pre name="code" class="html">function formatAction(value,row,index){
return "<input type='button' value='编辑'/><input type='button' value='删除'/>";
}
$('#test').combogrid({
panelWidth:500,
url: 'get_ci_infor.do',
idField:'resourceid',
textField:'name',
mode:'remote',
fitColumns:true,
columns:[[
{field:'name',title:'Item ID',width:60},
{field:'resourceid',title:'Stauts',align:'center',formatter:formatAction,width:30}
]]
});
datagrid的使用：
1.常用的使用场景：新增不加载，编辑加载：所以要控制一下：在html有了url，会默认请求一次无参数的，在html中不加入url，需要调用的时候加入：
if ( pageType!="add") {
$("#mainTabslist").datagrid({
url :"${pageContext.request.contextPath}/purcharing/purchase_list_ategrid.do",
queryParams: {
"resourceid" : $("#resourceid").val()
},
pagination : true
});
}$("#mainTabsInstallation").datagrid("load",{resourceid:data.itsm_soft.resourceid});
扫一扫
798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
