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：

所属区域: &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(){

      //快递公司取数据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(){

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

});

巴特西

FTL页面常用到的一些方法combobox、combotree、datagrid

最新文章

热门文章