參考文件：點擊下載

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為psNameif(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：

所屬區域: &nbsp;&nbsp;&nbsp;<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(){//快遞公司取數據urlvar 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")@ResponseBodypublic String getComboboxData(HttpServletRequest request) {//數據字典的CODEString 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")@ResponseBodypublic 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="詳細>" οnclick="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的值，賦值給變量rowsvar 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(){

上面的所有操作都在這里面

});

?

轉載于:https://www.cnblogs.com/shuilangyizu/p/6747809.html

總結

以上是生活随笔為你收集整理的FTL页面常用到的一些方法combobox、combotree、datagrid的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。