FTL页面常用到的一些方法combobox、combotree、datagrid
参考文件：点击下载
1.combobox：
（1）.js
1）初始化combobox
//相似度 $('#same').combobox({ //url:"<@s.url value="/static/json/dataSource.json" />", url: '<@s.url namespace="/app/unified" action="unifiedEnter!enterpriseSameJsonList" includeParams="none" />', method: "get", width:160, height:30, valueField: 'id', textField: 'text', onChange: function (newVal,oldVal) { //alert("newVal:"+newVal+",oldVal:"+oldVal); //searchPSLeftDatas(); } //选择成功传入此项的节点数据 /*onSelect:function(node){ //此节点中id为outPutCode，text为psName if(outPutCode!=node.id){ outPutCode=node.id; outPutName=node.text; //给id为psCode的input标签赋值psCode $('#outPutCode').val(outPutCode); //给id为outPutName的combobox赋值outPutName $('#outPutName').combobox('setValue', outPutName); } }*/ });
2）针对combobox的一些常用操作
//清空combobox的值 $('#same').combobox('clear'); //给combobox赋初始值（2是json数据中的id值） $('#same').combobox('setValue', "2"); //获取combobox的当前值（得到的是json数据中的id值） $("#same").combobox('getValue'); //获取所有数据 //var data = $('#outPutName').combobox('getData'); //获取text值 $('#com').combobox('getText')； //禁用combobox $('#same').combobox('disable'); //启用combobox $('#same').combobox('enable');
（2）.html
<td class="lc"> 相似度 </td> <td colspan="3"> <input style="width: 90%; height: 35px; line-height: 35px; border-bottom-style: solid; border-color: #D0D0D0; border-width: 0px; padding-left: 10px;" type="text" name="same" id="same" value=""/> </td>
（3）.java
/** * 获取相似度列表 */ public String enterpriseSameJsonList() throws Exception { //通过findItemMapFromCacheByCode方法查找到所有的污染源编码和名称，以键值对的方式存放在map集合中 Map<String,String> map = dicItemManager.findItemMapFromCacheByCode("xsd"); //创建StringBuffer类型的变量json，用于存放拼装好的json数据 StringBuffer json = new StringBuffer("["); //如果map集合不为空则执行if内的for循环 if(map!=null && map.size()>0){ for(int i=0;i<map.size();i++){ if (StringUtils.isNotEmpty((String) map.get(i+""))){ json.append("{\"id\":" + "\"" + i + "\","); json.append("\"text\":" + "\"" + (String) map.get(i+"") + "\"}"); if(i<map.size()-1){ json.append(","); } } } } json.append("]"); this.jsonObject = json.toString(); return JSON; }
上面方法是将相似度选项配置在了数据字典中，如下：也可以通过其他方式拼装Map<String,String>类型的数据返回。
上面方法中各种数据的样式：
map数据：{0=100%, 1=90%, 2=80%, 3=70%, 4=60%}
json数据：[{"id":"0","text":"100%"},{"id":"1","text":"90%"},{"id":"2","text":"80%"},{"id":"3","text":"70%"},{"id":"4","text":"60%"}]
JSON数据：json
参考：http://www.cnblogs.com/shuilangyizu/p/6709480.html
2.combotree：
A.combotree单选
（1）JS:
1）初始化combotree
//所属区域 $('#search_regionCode').combotree({ //url:"<@s.url value="/static/json/regioncode.json" />", url: '<@s.url namespace="/app/unified" action="unifiedEnter!regionJsonList" includeParams="none" />', method: "get", width:160, height:30, valueField: 'id', textField: 'text', onSelect : function(node) { //返回树对象 var tree = $(this).tree; //选中的节点是否为叶子节点,如果不是叶子节点,清除选中 var isLeaf = tree('isLeaf', node.target); if (!isLeaf) { //清除选中 $('#search_regionCode').combotree('clear'); } }, onBeforeLoad: function(){ $('#search_regionCode').combotree('setValue', region); $('#search_regionCode').combotree('disable'); } });
2)针对combotree的一些常用操作:
//清空combotree的值 $('#search_regionCode').combotree('clear'); //给combotree赋初始值（110108是json数据中的id值） $('#search_regionCode').combotree('setValue', "110108"); //获取combotree的当前值（得到的是json数据中的id值） $("#search_regionCode").combotree('getValue'); //禁用combotree $('#search_regionCode').combotree('disable'); //启用combotree $('#search_regionCode').combotree('enable');
//获取所有选中的节点
$("#search_regionCode").combotree('getValues');
（2）HTML：
所属区域: <input id="search_regionCode" style="width:100%"><br/>
（3）Java：
/** * 获取区域数据 */ public String regionJsonList() throws Exception { this.jsonObject = codeDataManager.findJsonTreeDataFromCache( CodeDataManager.T_REGION, "110000"); return JSON; }
上面方法是将获得了区域编码以及名称拼装成的json数据，如下：
this.jsonObject数据：[{"id":"110100","text":"市辖区","state":"closed","children":[{"id":"110101","text":"东城区"},{"id":"110102","text":"西城区"},{"id":"110105","text":"朝阳区"},{"id":"110106","text":"丰台区"},{"id":"110107","text":"石景山区"},{"id":"110108","text":"海淀区"},{"id":"110109","text":"门头沟区"},{"id":"110111","text":"房山区"},{"id":"110112","text":"通州区"},{"id":"110113","text":"顺义区"},{"id":"110114","text":"昌平区"},{"id":"110115","text":"大兴区"},{"id":"110116","text":"怀柔区"},{"id":"110117","text":"平谷区"},{"id":"110118","text":"北京经济技术开发区"}]},{"id":"110200","text":"县","state":"closed","children":[{"id":"110228","text":"密云县"},{"id":"110229","text":"延庆县"}]}]
也可以以其他方法拼装成这样的数据返回
B.combotree做出一个类似于combobox的多选框示例：
（1）效果图：
（2）HTML代码：
快递公司： <input id="oExpressType" name="oExpressType" type="text"> <input id="expressType" name="expressType" type="hidden">
（3）JS代码：
<script type="text/javascript"> $(document).ready(function(){ //快递公司取数据url var expressUrl = "utilController.do?getComboboxData&comboboxData=expressType"; var expressCodes = ""; $.ajax({ type:"POST", url:expressUrl, async: false, success:function(data){ data = $.parseJSON(data); $('#orderExpressType').combotree({ method: "get", width:120, height:30, valueField: 'id', textField: 'text', multiple: true,//当为true时，为多选，false为单选 //lines: true, checkbox: true, data:data, onSelect : function(node) { //返回树对象 var tree = $(this).tree; //选中的节点是否为叶子节点,如果不是叶子节点,清除选中 var isLeaf = tree('isLeaf', node.target); if (!isLeaf) { //清除选中 $('#orderExpressType').combotree('clear'); } }, //复选选中获取值 onCheck: function (ass, checked) { if (checked == true) { var code = ass.id; if (expressCodes==null||expressCodes=="") { expressCodes = code; }else{ expressCodes = expressCodes + "," + code; } $('#expressType').val(expressCodes); }else{ var code = ass.id; var newstatus = ""; var oldstatus = $('#expressType').val(); var ostatus = oldstatus.split(","); for (var i = 0; i < ostatus.length; i++) { if (code!=ostatus[i]) { if (newstatus==null||newstatus=="") { newstatus = ostatus[i]; }else{ newstatus = newstatus + "," + ostatus[i]; } $('#expressType').val(newstatus); } } } }, //面板展开时触发 onShowPanel: function () { $(this).combobox('panel').height("auto"); } }); } }); }); </script>
（4）java代码：
/** * combobox下拉多选JSON数据获取:仅限数据字典形式 * @param request * @return */ @RequestMapping(params = "getComboboxData",produces="application/json;charset=UTF-8") @ResponseBody public String getComboboxData(HttpServletRequest request) { //数据字典的CODE String comboboxData = request.getParameter("comboboxData"); TSTypegroup tsTypegroup = systemService.findUniqueByProperty(TSTypegroup.class, "typegroupcode", comboboxData); List<TSType> list = tsTypegroup.getTSTypes(); List<Map<String,Object>> dataList = new ArrayList<Map<String,Object>>(); Collections.sort(list, new Comparator<TSType>() { public int compare(TSType o1, TSType o2) { return o1.getTypecode().compareTo(o2.getTypecode()); } }); Map<String,Object> map = null; for (TSType tsType : list) { map = new HashMap<String,Object>(); map.put("id", tsType.getTypecode()); map.put("text", tsType.getTypename()); //map.put("state","closed"); map.put("state","open"); dataList.add(map); } JSONArray arry=JSONArray.fromObject(dataList); arry.toString(); return arry.toString(); }
（5）JSON数据：
[{"id":"1","text":"顺丰","state":"open"},{"id":"2","text":"申通","state":"open"},{"id":"3","text":"EMS","state":"open"}]
C.combotree做出一个树形的多选框示例：
（1）效果图：
（2）HTML代码：
部门： <input id="deptName" name="deptName" type="text"> <input id="salerDeptId" name="salerDeptId" type="hidden">
（3）JS代码：
<script type="text/javascript"> $(document).ready(function(){ //部门下拉树多选 var deptUrl = "utilController.do?getComboTreeData"; $.ajax({ type:"POST", url:deptUrl, async: false, success:function(data){ data = $.parseJSON(data); $('#deptName').combotree({ method: "get", width:130, height:30, valueField: 'id', textField: 'text', multiple: true,//当为true时，为多选，false为单选 lines: true, checkbox: true, data:data, onSelect : function(node) { //返回树对象 var tree = $(this).tree; //选中的节点是否为叶子节点,如果不是叶子节点,清除选中 var isLeaf = tree('isLeaf', node.target); if (!isLeaf) { //清除选中 $('#deptName').combotree('clear'); } }, //复选选中获取值 onCheck: function (ass, checked) { //获取当前选中的节点 var data = $("#deptName").combotree('getValues'); $('#salerDeptId').val(data); }, //面板展开时触发 onShowPanel: function () { $(this).combotree('panel').height("auto"); } }); } }); }); </script>
（4）java代码：
/** * combotree下拉多选JSON数据获取 * @param request * @return */ @RequestMapping(params = "getComboTreeData",produces="application/json;charset=UTF-8") @ResponseBody public String getComboTreeData(HttpServletRequest request) { //构造一个 List<CombotreeUtil> dataList = new ArrayList<CombotreeUtil>(); List<TSDepart> tsDepartList = systemService.findByQueryString(" from TSDepart where TSPDepart is null or TSPDepart = '' "); for (TSDepart tsDepart : tsDepartList) { CombotreeUtil combotreeUtil = new CombotreeUtil(); combotreeUtil = getDepts(tsDepart.getId(),combotreeUtil); dataList.add(combotreeUtil); } JSONArray arry=JSONArray.fromObject(dataList); return arry.toString(); } /** * 递归部门的方法 * @param deptid * @return */ public CombotreeUtil getDepts(String deptid,CombotreeUtil data) { if (StringUtils.isNotEmpty(deptid)) { TSDepart depart = systemService.getEntity(TSDepart.class, deptid); List<TSDepart> departs = systemService.findByQueryString(" from TSDepart where TSPDepart = '" + deptid + "'"); if (depart!=null) { List<CombotreeUtil> dataList = new ArrayList<CombotreeUtil>(); //树形下拉框数据拼接JSON工具类 data.setId(depart.getId()); data.setText(depart.getDepartname()); if (departs.size()>0) { data.setState("closed"); List<CombotreeUtil> children = new ArrayList<CombotreeUtil>(); CombotreeUtil combotree = new CombotreeUtil(); for (TSDepart tsdepart : departs) { combotree = getDepts(tsdepart.getId(),new CombotreeUtil()); children.add(combotree); } data.setChildren(children); }else{ data.setState("open"); data.setChildren(null); } dataList.add(data); } } return data; }
java工具类：
package com.jeecg.util.entity; import java.util.List; /** * combotree所需JSON数据拼装工具类 * @author liufeng * */ public class CombotreeUtil { /** * 树形数据Code */ private String id; /** * 树形数据展示内容 */ private String text; /** * 树形节点是否打开：open:打开节点；closed:关闭节点 */ private String state; /** * 树形节点如果有子节点会存入此属性 */ private List<CombotreeUtil> 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 List<CombotreeUtil> getChildren() { return children; } public void setChildren(List<CombotreeUtil> children) { this.children = children; } }
（5）JSON数据：
[{"id":"110100","text":"市辖区","state":"closed","children":[{"id":"110101","text":"东城区"},{"id":"110102","text":"西城区"},{"id":"110105","text":"朝阳区"},{"id":"110106","text":"丰台区"},{"id":"110107","text":"石景山区"},{"id":"110108","text":"海淀区"},{"id":"110109","text":"门头沟区"},{"id":"110111","text":"房山区"},{"id":"110112","text":"通州区"},{"id":"110113","text":"顺义区"},{"id":"110114","text":"昌平区"},{"id":"110115","text":"大兴区"},{"id":"110116","text":"怀柔区"},{"id":"110117","text":"平谷区"},{"id":"110118","text":"北京经济技术开发区"}]},{"id":"110200","text":"县","state":"closed","children":[{"id":"110228","text":"密云县"},{"id":"110229","text":"延庆县"}]}]
3.datagrid:
（1）初始化：
//加载页面数据 $('#operationGrid').datagrid({ //datagrid的访问路径 url: '<@s.url namespace="/app/operation" action="DataVoAction!jsonList" includeParams="none" />', //标题 title: '排污企业现场运维台账', //是否显示斑马线效果 striped: true, //是否可折叠 collapsible:false, //定义列的排序顺序，只能是'asc'或'desc' sortOrder: 'asc', //定义从服务器对数据进行排序 remoteSort: true, //定义宽度 width: 'auto', //定义高度 height: fillDataGridHeight(), //在设置分页属性的时候初始化页码 pageNumber:pageNo, //在设置分页属性的时候初始化页面大小 pageSize: pageSize, //如果为true，则只允许选择一行 singleSelect:true, //使列自动展开/收缩到合适的DataGrid宽度 fitColumns: false, //指明哪一个字段是标识字段 idField:'id', //顶部工具栏的DataGrid面板 toolbar:[{ text:'添加', iconCls:'icon-add', handler:function(){ openTopWindow('lawInput', '排污企业现场运维台账信息维护', '<@s.url namespace="/app/operation" action="DataVoAction!input" includeParams="none" />?menuId=${menuId}', 250,200); } },'-',{ text:'修改', iconCls:'icon-edit', handler:function(){ popTopEdit('operationGrid','datagrid','lawInput', '排污企业现场运维台账信息维护', '<@s.url namespace="/app/operation" action="DataVoAction!edit" includeParams="none" />?menuId=${menuId}',1000,600); } },'-',{ text:'删除', iconCls:'icon-remove', handler:function(){ deleteSelectedRow('operationGrid', 'datagrid', '<@s.url namespace="/app/operation" action="DataVoAction!delete" includeParams="none" />', false, 'processWindow', 0, 0); } }], //DataGrid列配置对象 columns:[[ //field:列字段名称 {field:'id',hidden:true}, {field:'operationDate',title:'运维日期',width:150,align:"center", formatter:function(value,row,index){ var year = new Date(row.operationDate.time).getFullYear(); var month = new Date(row.operationDate.time).getMonth(); var day = new Date(row.operationDate.time).getDate(); var time = year+'年'+(month+1)+'月'+day+'日'; return time; } }, {field:'psName',title:'污染源企业',width:250}, {field:'outPutName',title:'监控点名称',width:120,align:"center"}, {field:'equipmentName',title:'设备名称',width:120,align:"center"}, //单元格formatter(格式化器)函数，带3个参数：value：字段值。row：行记录数据。index: 行索引。 {field:'parameterType',title:'台账类型',width:120,align:"center", formatter:function(value,row,index){ if(value=="1"){ return "废水巡检"; }else if(value=="2"){ return "废水维修"; }else if(value=="3"){ return "烟气巡检"; }else if(value=="4"){ return "烟气维修"; }else{ return ""; } } }, {field:'informant',title:'填报人',width:120,align:"center"}, {field:'opt',title:'台账内容',width : 260,align:'center',rowspan:3, formatter:function(value,row,index){ var e = '<input dataId="'+row.id+'" class="button_02" type="button" style=" margin-left:5px; width:50px;height:32px;" value="详细>" onclick="openJsWindow(this)"/>'; return e; } } ]], //如果为true，则显示一个行号列 rownumbers:true, //如果为true，则在DataGrid控件底部显示分页工具栏 pagination:true, //在用户排序一列的时候触发，参数包括：sort：排序列字段名称。order：排序列的顺序(ASC或DESC) onSortColumn:function(sort,order){ //定义从服务器对数据进行排序。 remoteSort('operationGrid', 'datagrid', sort, order); } }); //getPager:返回页面对象 var p = $('#operationGrid').datagrid('getPager'); if (p){ $(p).pagination({ //onChangePageSize:在页面更改页面大小的时候触发 onChangePageSize:function(rows) { //刷新并显示分页栏信息 refresh('operationGrid', 'datagrid', {pageNo:pageNo,pageSize:rows}); } }); }
（2）查询：
//点击查询触发 $('#btSearch').click(function() { //清除所有选中 $("#operationGrid").datagrid('clearSelections'); /*$('#operationGrid').datagrid('options'):就是获得你初始化datagird时的option对象 queryParams:在请求远程数据的时候发送额外的参数*/ var queryParams = $('#operationGrid').datagrid('options').queryParams; //获取前面为search_的参数 var search_psCode = $('#psCode').val(); var search_psName = $('#psName').combobox('getValue'); var search_outPutCode = $('#outPutCode').val(); var search_outPutName = $('#outPutName').combobox('getValue'); var search_startTime = $('#dueDate').val(); var search_endTime = $('#dueDate2').val(); var search_keywords = $('#keywords').val(); var search_parameterType = $('#parameterType').val(); queryParams.search_psCode = search_psCode; queryParams.search_psName = search_psName; queryParams.search_outPutCode = search_outPutCode; queryParams.search_outPutName = search_outPutName; queryParams.search_startTime = search_startTime; queryParams.search_endTime = search_endTime; queryParams.search_keywords = search_keywords; queryParams.search_parameterType = search_parameterType; $('#operationGrid').datagrid('options').queryParams = queryParams; $('#operationGrid').datagrid({ pageNumber:1 }); refresh('operationGrid', 'datagrid'); });
（3）详情触发：
//点击详细触发 function openJsWindow(obj){ //创建变量$row，用于接收传递的参数obj的值 var $row = $(obj); //获取属性dataId的值，赋值给变量rows var rows = $row.attr("dataId"); if(rows == ''){ topAlert('提示消息','请选择记录！'); }else{ openTopWindow('lawInput', '设备档案详细信息', '<@s.url namespace="/app/operation" action="DataVoAction!detail" includeParams="none" />?id='+rows, 1000, 600); } };
（4）datagrid示例：
1>.datagrid实例化 $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100}, {field:'price',title:'Price',width:100,align:'right'} ]] }); 2>.json数据格式 {"total":2,"rows":[ {"code":"RP-LI-02","name":"Persian","price":89.50}, {"code":"AV-CB-01","name":"Amazon Parrot","price":63.50} ]}
（5）HTML代码：
<!--数据展示 --> <div> <table id="dg"></table> </div>
注意：$(function(){
上面的所有操作都在这里面
});
