zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    bzoj1797
    bzoj1266
    bzoj1497
    bzoj1412
    bzoj3156
    JSOI2014第三轮总结
    bzoj1855
    bzoj1044
    codeforces 371D
    codeforces 371B
  • 原文地址:https://www.cnblogs.com/SunXiaoLin/p/11050051.html
Copyright © 2011-2022 走看看