下拉框停用數據的處理

時間 2019-11-07

標籤下拉停用數據處理简体版

原文原文鏈接

如今有個需求是：下拉框裏面的數據是能夠停用的，停用以後用戶是不能再選擇已經停用的數據，可是要以前已經選擇了停用數據的沒影響。javascript

個人解決思路爲：在下拉框的展開事件中，將Enabled=false的過濾掉，保留啓用的和沒有Enabled字段的數據。這樣若是用戶沒有去點擊停用數據的combobox數據是不會丟掉，並且驗證也能經過java

在EXT.JS下的具體實現爲下面的代碼（刪除了一些與本實現無關的代碼），expand方法爲查詢的時候調用的（查詢方法去掉了），監聽change事件，目的在於選擇完以後將過濾掉的數據加回來mvc

要注意的是ide

1：Ext的filterBy事件會觸發change事件，因此須要在filterBy時將change事件掛起ui

2：filterDisabled屬性爲mvc後臺下發的，做用在於只有在須要的時候才啓用過濾掉禁用的數據this

Ext.form.field.ComboBox.override({
    useHiddenField: false,
    forceSelection: true,
    queryParam: "filter",
    clearIcon: true,
    filterDisabled: false, //是否啓用過濾停用數據
    //matchFieldWidth:false,
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        me.on("change", me.change, me);
    },
    
    expand: function () {
        var me = this;
        if (me.filterDisabled) {
            //移除Enabled==false的數據
            me.suspendEvent('change');//掛起change事件
            me.getStore().filterBy(function (item) {
                return item.get("Enabled") !== false && item.get("field3") !== "False";//field3是grid中下拉框的啓用字段
                }
            );
            me.resumeEvent('change');//取消掛起change事件
        }
        
        me.callParent(arguments);
    },
    change: function (obj,isDirty,e) {
        var me = this;
        if (me.filterDisabled) {
            me.getStore().clearFilter();
        }
        
    },

    onDestroy: function () {
        Ext.destroy(this.clearIconEl);
        this.callParent(arguments);
    }

});

　　後臺下發filterDisabled屬性spa

/// <summary>
        /// 啓用下拉框過濾禁用/停用的數據（form中使用）
        /// </summary>
        /// <param name="builder"></param>
        public static void EnableFilterDisabled(this ComboBox.Builder builder)
        {
            builder.Config("filterDisabled", true);
       }