easyui 可编辑datagrid comobox多选不显示及值存储问题

最新推荐文章于 2021-05-24 15:39:02 发布

zbheart_95588

最新推荐文章于 2021-05-24 15:39:02 发布

阅读量566

点赞数

分类专栏： EasyUI 文章标签： comobox多选可编辑 datagrid 可编辑表格comobox多选 comobox多选无法回显

本文链接：https://blog.csdn.net/zbheart_95588/article/details/85170150

版权

EasyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

话不多说，直接上干货。

行编辑使用comobox组件多选不显示问题，主要是由于多选的值是以逗号隔开，且第一个是空的，需要在开启行编辑状态后、结束行编辑状态结束前设置多选框显示的名称和值。操作如下：

1、首先先设置可以进行comobox多选的列，如下所示：

{
                           field : 'jcyj',
                           title : '检测依据',
                           width : 300,
                           sortable : true,
                           align : 'left',
                           formatter : function(value,rowData, index) {
                               return rowData.bzmc;
                           },
                           editor : {
                               type : "combobox",
                               options : {
                                   url : '${pageContext.request.contextPath}/com/rf/gjframe/busBasic/mvc/item/getAllJcbz.do',
                                   method : 'POST',
                                   valueField : 'bzid',
                                   textField : 'bzbh',
                                   missingMessage : '请选择检测标准',
                                   panelHeight : 400,
                                   editable : false,
                                   multiple : true,
                                   required : false
                               }
                           }
                       }

其中，return rowData.bzmc，表示显示的是该字段的值，通常是名称。

2、首选对编辑状态下comobox组件进行扩展：

$.extend($.fn.datagrid.defaults.editors.combobox, {
               getValue : function(jq) {
                   var opts = $(jq).combobox('options');
                   if (opts.multiple) {
                       var values = $(jq).combobox('getValues');
                       if (values.length > 0) {
                           if (values[0] == '' || values[0] == ' ') {
                               return values.join(',').substring(1);//新增的时候会把空白当成一个值了，去掉
                           }
                       }
                       return values.join(',');
                   } else
                       return $(jq).combobox("getValue");
               }
           });

3、关闭行可编辑状态前设置多选框显示的名称和值：

var bzmc = $('#datagrid').datagrid('getEditor', {
                       index : editIndex,
                       field : 'jcyj'
                   }).target.combobox('getText');
                   var bzValues = $('#datagrid').datagrid('getEditor', {
                       index : editIndex,
                       field : 'jcyj'
                   }).target.combobox('getValues');

$('#datagrid').datagrid('getRows')[editIndex]['bzmc'] = bzmc.substring(1);
                   if(bzids != ""){
                       $('#datagrid').datagrid('getEditor', {
                           index : editIndex,
                           field : 'jcyj'
                       }).target.combobox('setValues',bzids.split(","));
                   }

4、开启行可编辑状态后设置多选框显示的名称和值：

关于值存储，操作如下：

1、前台传递后台JSON字符串，可使用JSON.stringify($('#datagrid').datagrid('getRows'))传递给后台；

2、后台进行解析和存储。传递过来的JSON字符串转化为JSONArray对象，进行相关操作。

JSONArray Rows = saveRows.getJSONArray("rows");

其中，rows为前台传递给后台的JSON字符串。之后进行遍历及相关操作。

JSONObject object = null;
String jccszj = null;
String selectBzid = "";

for(int i=0;i<rows.size();i++){
               object = rows.getJSONObject(i);
               jccszj = object.getString("jccszj");
               if (StringUtils.isNotNullOrEmpty(object.get("jcyj"))) {
                   selectBzid = object.getString("jcyj");
                   if (jccsBz.containsKey(jccszj)) {
                       String existBzid = jccsBz.get(jccszj);
                       jccsBz.put(jccszj, existBzid + "," + selectBzid);
                   } else {
                       jccsBz.put(jccszj, selectBzid);
                   }
               }
           }
           if(!jccsBz.isEmpty()){
               for (Map.Entry<String, String> entry : jccsBz.entrySet()) {
                   String[] bzids = StringUtils.array_unique(entry.getValue().split(","));
                   for(String id : bzids){
// 数据存储操作
                   }
           }
           }

其中，array_unique方法是用来对数组元素进行去重。

/**
   * 数组去重
   *
   * @param ss
   * @return
   */
   public static String[] array_unique(String[] ss) {
       // array_unique
       List<String> list = new ArrayList<String>();
       for (String s : ss) {
           if (!list.contains(s) && !StringUtils.isEmptyStr(s)) // 或者list.indexOf(s)!=-1
               list.add(s);
       }
       return list.toArray(new String[list.size()]);
   }