首页 > 代码库 > FTL页面常用到的一些方法combobox、combotree、datagrid
FTL页面常用到的一些方法combobox、combotree、datagrid
1.combobox：
（1）.js
1）初始化combobox
//相似度 $(‘#same‘).combobox({ //url:"<@s.url value="http://www.mamicode.com/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 = http://www.mamicode.com/$(‘#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：
（1）JS:
1）初始化combotree
//所属区域 $(‘#search_regionCode‘).combotree({ //url:"<@s.url value="http://www.mamicode.com/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‘);
（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":"延庆县"}]}]
也可以以其他方法拼装成这样的数据返回
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(valuehttp://www.mamicode.com/=="1"){ return "废水巡检"; }else if(valuehttp://www.mamicode.com/=="2"){ return "废水维修"; }else if(valuehttp://www.mamicode.com/=="3"){ return "烟气巡检"; }else if(valuehttp://www.mamicode.com/=="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="http://www.mamicode.com/详细>" 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); } };
注意：$(function(){
上面的所有操作都在这里面
});
FTL页面常用到的一些方法combobox、combotree、datagrid
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。