乏mily

导航

treeMultiselect 去掉勾选项

场景描述:弹窗,显示树形结构,节点层次可变(可只有一级节点,也可是多级节点),限制只能选择一个节点!

1、修改jquery.tree-multiselect.min.js 文件

2、前台页面

参考代码:

<!--耗材分类弹出框-->
<div class='popupWindow' id="itemTypeView">
    <ul>
        <li class="popupWindow-header">
            <div class="titleName" id="titleName">@T("Consumable_type")</div>
            <div class="close">×</div>
        </li>
        <li>
            <div class="popupWindow-content">
                <div class="form-group col-xs-12 popupWindow-tree" style="overflow-y: auto;overflow-x: hidden;max-height: 410px;">
                    <select id="test-select" multiple="multiple" class="treeCheckbox"></select>
                </div>
            </div>
        </li>
        <li>
            <div class="popupWindow-footer">
                <button type="button" class="btn btn-primary" onclick="buttonLoading(this)" autocomplete="off" id="btn_save" data-bind="click:saveItemTypeClick">@T("op_save")</button>
                <button type="button" class="btn btn-default" id="btn_cancel" data-bind="click:closeItemTypeClick">@T("op_cancel")</button>
            </div>
        </li>
    </ul>
</div>
View Code

 

3、调用

参考代码:

    //选择耗材分类
    this.selectItemType = function () {
        //初始化树
        var $select = $('#test-select');
        var div = $select.parent();
        var param = {
            itemtypecode: self.form.itemtypecode()
        }
        $.ajax({
            type: "POST",
            url: self.urls.getitemtype,
            data: { data: JSON.stringify(ko.toJS(param)) },
            beforeSend: function () {
                showLoading();
            },
            success: function (d) {
                if (d.result == "error") {
                    console.log(d.message);
                    $(div).html(com.getLocalization(self.sourceName, "Data loading failure."));
                } else {
                    $select.html("");
                    $(div).html("").append($select);
                    var treeData = com.parseJson(d);
                    for (var i = 0; i < treeData.length; i++) {
                        var treenode = treeData[i];
                        var $option = $('<option value="' + treenode.treeNodecode + '" data-parent-code="' + treenode.treeNodeParentPathCode + '" data-section="' + treenode.treeNodeParentPathText + '" class="float-left"  ' + ($.trim(treenode.checkState) == "" ? '' : 'selected="' + treenode.checkState + '"') + '>' + treenode.treeNodetext + '</option>');
                        if (treenode.treeNodeParentPathCode == "0") {
                            $option = $('<option value="' + treenode.treeNodecode + '" data-parent-code="' + treenode.treeNodeParentPathCode + '" data-section="' + treenode.treeNodetext + '" class="float-left"  ' + ($.trim(treenode.checkState) == "" ? '' : 'selected="' + treenode.checkState + '"') + '></option>');
                        }
                        $(div).find('#test-select').append($option);
                    }
                    var treeObject = $select.treeMultiselect({ enableSelectAll: false, sortable: true, searchable: true, onChange: treeChange })[0];
                    $('#test-select').closest('.popupWindow').css('top', ($(window).height() - $('#test-select').closest('.popupWindow').height()) / 2 + "px");
                    function treeChange(options, add, remove) {
                        if (add.length > 0) {
                            $.each($("#test-select option"), function (i, e) {
                                if (e.value != add[0].value) {
                                    //去掉树节点的勾选项
                                    treeObject.removeItem($(e).attr("data-key"));
                                }
                            })
                        }
                    }
                }
            },
            error: function (d) {
                NotifyDanger(d.message);
            },
            complete: function () {
                hideLoading();//关闭特效
            }
        });
        showNormalWindow('itemTypeView');
    }
    //保存耗材分类
    this.saveItemTypeClick = function () {

        ///获取选择的药效分类信息
        var itemtypenames = "", itemtypecodes = "";
        var count = parent.$("#test-select option").length;
        $.each(parent.$("#test-select").get(0).options, function (i, e) {
            if (e.text != "") {//子节点
                itemtypenames += e.innerHTML + ",";
                itemtypecodes += e.value + '_0' + ",";
            } else {
                itemtypenames += $(e).attr("data-section") + ",";
                itemtypecodes += $(e).attr("value") + '_0' + ",";
            }
        })
        if (self.form.itemtypecode().trim() != "") {
            var deleteitemtypecode = $.map(self.form.itemtypecode().split(','), function (e, i) {
                var code = e.substring(0, e.length - 2);
                if (itemtypecodes.indexOf(code) == -1) {
                    return code
                }
            })
            $.each(deleteitemtypecode, function (i, e) {
                itemtypecodes += e + '_1' + ",";
            })
        }
        self.form.itemtypename(itemtypenames.substring(0, itemtypenames.length - 1));
        self.form.itemtypecode(itemtypecodes.substring(0, itemtypecodes.length - 1));

        self.closeItemTypeClick();
    }
    //关闭耗材分类弹窗
    this.closeItemTypeClick = function () {
        hidePopupWindow('itemTypeView');
    }
View Code

 

4、数据转换

 /// <summary>
        /// 获取耗材分类
        /// </summary>
        /// <param name="data"></param>
        /// <returns></returns>
        [AlwaysAccessible]
        public JsonResult GetItemType(string data)
        {
            var d = JsonConvert.DeserializeObject<dynamic>(data);
            string itemtypecode = d.itemtypecode == null ? "" : ((string)d.itemtypecode.ToString()).Trim();

            try
            {
                //当前耗材已经关联的itemtypecode集合
                List<string> selectedItemTypeCoce = new List<string>();
                if (!string.IsNullOrEmpty(itemtypecode) && itemtypecode != "[]")
                {
                    foreach (string item in itemtypecode.Split(','))
                    {
                        if (item.Split('_')[1] == "0")
                        {
                            selectedItemTypeCoce.Add(item.Split('_')[0]);
                        }
                    }
                }
                #region 获取树状结构数据
                ReturnMsg readData = new DeviceService().sys_query_comn(@"with recursive r(itemtypecode,itemtypename,parentitemtypecode,parentitemtypename) as(
    --select itemtypecode,itemtypename,parentitemtypecode::varchar(500),1 as depth from base_itemtype where parentitemtypecode='0' and main.itemtypeclass='1'
    select main.itemtypecode,main.itemtypename,main.parentitemtypecode::varchar(500),bi.itemtypename::varchar(500) parentitemtypename from base_itemtype main
    left join base_itemtype bi on main.parentitemtypecode=bi.itemtypecode where main.parentitemtypecode='0' and main.itemtypeclass='2' and main.isdelete=0
    union ALL
    select bi.itemtypecode,bi.itemtypename,case when r.parentitemtypecode='0' then bi.parentitemtypecode::varchar(500) else (r.parentitemtypecode||'✪'||bi.parentitemtypecode)::varchar(500) end , case when r.parentitemtypename is null then bi.parentitemtypename::varchar(500) else (r.parentitemtypename||'✪'||bi.parentitemtypename)::varchar(500) end 
    from (select main.itemtypecode,main.itemtypename,main.parentitemtypecode,bi.itemtypename parentitemtypename from base_itemtype main
        left join base_itemtype bi on bi.itemtypecode=main.parentitemtypecode where main.isdelete=0
    ) bi,r where bi.parentitemtypecode = r.itemtypecode
)
select * from r 
where r.itemtypecode not in (select parentitemtypecode from base_itemtype where isdelete=0)
", 1, 0);
                #endregion
                if (readData.returnlist.Count > 0)
                {
                    List<Tree> roleTreenodes = new List<Tree>();
                    foreach (var roleSelected in readData.returnlist)
                    {
                        Tree treenode = new Tree();
                        treenode.treeNodecode = ((HashMap<object, object>)roleSelected)["itemtypecode"] != null ? ((HashMap<object, object>)roleSelected)["itemtypecode"].ToString().Trim() : "";//设备型号编码在树中以“DM^”开头,以区分角色编码
                        treenode.checkState = (selectedItemTypeCoce.Contains(treenode.treeNodecode) ? "selected" : "");
                        treenode.treeNodetext = ((HashMap<object, object>)roleSelected)["itemtypename"] != null ? ((HashMap<object, object>)roleSelected)["itemtypename"].ToString().Trim() : "";
                        treenode.treeNodeParentPathCode = ((HashMap<object, object>)roleSelected)["parentitemtypecode"] != null ? ((HashMap<object, object>)roleSelected)["parentitemtypecode"].ToString().Trim() : "";
                        treenode.treeNodeParentPathText = ((HashMap<object, object>)roleSelected)["parentitemtypename"] != null ? ((HashMap<object, object>)roleSelected)["parentitemtypename"].ToString().Trim() : "";
                        roleTreenodes.Add(treenode);
                    }
                    //return Json(new { result = "success", data = readData.returnlist }, JsonRequestBehavior.AllowGet);
                    var jsonArr = JsonConvert.SerializeObject(roleTreenodes);
                    return Json(jsonArr, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    return Json(new { result = "error", message = readData.returnmessage.Contains("java.lang") ? T("Api_exception").ToString() : readData.returnmessage }, JsonRequestBehavior.AllowGet);
                }
            }
            catch (Exception ex)
            {
                SaveException(new ExceptionMessage() { ex = ex, message = "URL:" + System.Web.HttpContext.Current.Request.Url.ToString() });
                return Json(new { result = "error", message = ex.Message }, JsonRequestBehavior.AllowGet);
            }
        }
View Code

 

posted on 2019-06-19 10:55  乏mily  阅读(515)  评论(0编辑  收藏  举报