项目的思考

1、需求

从多个comtree批量选择符合条件的选项。

2、现状

存在多个comtree，绑定数据的id及text，无批量操作。

 //comtree位置
@foreach (var info in Model.SubStationInfos)
        {
                        <div class="form_row">
                <div class="form_label">
                    <label>@info.SubStationName</label>
                </div>
                <div>
                    @{
                        Html.RenderAction("StockMultiple", "Controls", new { subStationSysNo = info.SubStationSysNo, name = "ddl_Stock_" + info.SubStation　　　　　　　　　　　　　　　　　　　　　　　　　　SysNo, selectedValue = info.ReceiptStock });
                    }
                </div>
            </div>     
           
       //ation
　　public ViewResult StockMultiple(int subStationSysNo, String name, IEnumerable<int> selectedValue)
　　｛
　　　　var stockList = _client.Get<StockFilterResponse>("/Stock");
　　　　var stockRelationList = _client.Get<StockRelationFilterResponse>(String.Format("/StockRelation?SubStationSysNo={0}", subStationSysNo));
　　　　var query = from obj in stockRelationList.Entities
　　　　join stock in stockList.Entities on obj.StockSysNo equals stock.SysNo
　　　　select new { id = stock.SysNo, text = HttpUtility.UrlEncode(stock.StockName) };

　　　　ViewBag.Json = JsonSerializer.SerializeToString(query, query.GetType());
　　　　ViewBag.Name = name;
　　　　ViewBag.SelectedValue = selectedValue.Join(",");
　　　　return View("Controls/MultipleDropDownList");
　　}

//view
<input id="@ViewBag.Name" name="@ViewBag.Name" class="easyui-combotree" panelheight="88" multiple  />
<script type="text/javascript" language="javascript">
    $(function () {
        $("#@ViewBag.Name").combotree({
            onLoadSuccess: function () {
                if ($("#@ViewBag.Name").combotree("getValues").length == 0)
                    $("#@ViewBag.Name").combotree('setText', '@Icson.Utility.AppConst.PleaseSelectString');
                if ('@ViewBag.SelectedValue' != '') {
                    var arr = $.trim('@ViewBag.SelectedValue').split(',');
                    $("#@ViewBag.Name").combotree('setValues', arr);
                }
            },
            onHidePanel: function () {
                if ($("#@ViewBag.Name").combotree("getValues").length == 0)
                    $("#@ViewBag.Name").combotree('setText', '@Icson.Utility.AppConst.PleaseSelectString');
            },
            onChange: function () {
                if ($("#@ViewBag.Name").combotree("getValues").length == 0) {
                    $("#@ViewBag.Name").combotree('setText', '@Icson.Utility.AppConst.PleaseSelectString');
                    $("#@ViewBag.Name").combotree("clear");
                }
            }
        });
        $("#@ViewBag.Name").combotree("loadData", $.parseJSON('@Html.Raw(HttpUtility.UrlDecode((string)ViewBag.Json))'));
    })
</script>

3、解决思路

1）获取数据源，数据源每条记录存在标识属性。

2）数据转换为json格式返回并绑定到对应的comtree。

 

3）根据标识批量勾选符合条件的数据。

4、解决方案

方案1、对于实现，很自然的想到将数据绑定到comtree，再在前段对comtree进行遍历操作。

1）该方案问题是每条数据都必须有三个属性需要绑定（id，text，flag），而对于comtree仅能提供id及text绑定，如何将flag也能绑定到对应的选项中是个问题。

原本打算是将数据id及flag按照某规则合并再绑定到comtree的id属性中（text用于显示），到前段再进行分解，实验许久，发觉会对原有的业务有影响以及操作会变的复杂，无法解决。

2）不直接使用comtree，自己拼接html组装为comtree，就可以多个赋值，不过本身对于前段技术不大熟悉及时间紧促，想想还是放弃。

方案2、根据条件在服务端组装好数据再重新绑定到comtree。

1）使用comtree的reload（查看html元素实际使用iframe）的方法重新加载数据，不过想不出方案设置默认值。

var url = "/Controls/GetStockMultiple?subStationSysNo=" + subStationSysNo+"&clothesType="+ ctype;
var stocks=sObj.combotree("reload",url);

2）服务端将数据源及默认值赋值到json实例，并返回该json实例，前段再通过ajax获取data，再对comtree重新loadData。

  [HttpPost]   
        public JsonResult GetStockMultiple(int subStationSysNo, int clothesType)
        {
            var stockList = _client.Get<StockFilterResponse>("/Stock");
            var stockRelationList = _client.Get<StockRelationFilterResponse>(String.Format("/StockRelation?SubStationSysNo={0}", subStationSysNo));
            var query = from obj in stockRelationList.Entities
                        join stock in stockList.Entities on obj.StockSysNo equals stock.SysNo
                        select new { id = stock.SysNo, text = stock.StockName, isCommonStock = stock.IsCommonStock };
            var selectedValue = new ArrayList();
            foreach (var s in query)
            { 
                if(s.isCommonStock==clothesType)
                    selectedValue.Add(s.id);
            }

            return Json(
                             new
                             {
                                 selectedValue = selectedValue,
                                 stocks = query,
                                 status = 0,
                             }
                        );
        }


function selectClothes(ctype)
    {       
        var stockList = $("[id^=ddl_Stock_]");
        for (var i = 0; i < stockList.length; i++) {
            var sObj = stockList.eq(i);
            var index = sObj.attr("id").lastIndexOf('_');
            var subStationSysNo = sObj.attr("id").substring(index + 1);
            var dataObj={subStationSysNo:subStationSysNo, clothesType:ctype};
            $.ajax({
                url: "/Controls/GetStockMultiple",
                dataType: "json",
                contentType: "application/json",
                type: "POST",
                async:false,
                data:  JSON.stringify(dataObj),
                success: function (data) {
                    if(data.status==0)
                    {
                        sObj.combotree("loadData", data.stocks);
                        if(data.selectedValue.length!=0)
                        {
                            sObj.combotree('setValues', data.selectedValue);
                        }
                        else
                        {
                            sObj.combotree('setText', '@Icson.Utility.AppConst.PleaseSelectString');
                        }
                    }
                }
            });
        }
        //不提交
        return false;
    }

注意点：对多个comtree绑定数据，而ajax默认为异步的，所以会导致数据错乱，需要将async属性设置为false，进行同步绑定。

5、总结

1、不要钻牛角尖，发现某个方案暂时无法解决问题，换个思路。

2、多请教别人，在讨论的过程中发现解决方案，有可能别人一句话就能解决，而你需要花几个小时。

3、多积累，不能只是照搬。