DEV控件学习使用之ASPxDropDownEdit

关于这个控件，是一个可以下拉多选的控件，我是感觉比较坑爹的，他前台的取选中项的值一定要触发两次事件才能取到值，也许是我处理的方式不对 ，如有大神知道怎么弄请指教。

我现在有2种方法，一种后台匹配，一种修改官方给我JS，个人倾向于修改JS后台可直接取到所有值组成的字符串，直接进行解析

前台HTML：

<dxe:ASPxDropDownEdit runat="server" ClientInstanceName="checkComboBox" ID="ASPxDropDownEdit1"
        NAME="ASPxDropDownEdit1" SkinID="CheckComboBox">
        <DropDownWindowTemplate>
            <dxe:ASPxListBox Width="100%" ID="listBox" ClientInstanceName="checkListBox" SelectionMode="CheckColumn"
                runat="server" SkinID="CheckComboBoxListBox">
                <ClientSideEvents SelectedIndexChanged="OnListBoxSelectionChanged" />
            </dxe:ASPxListBox>
            <table style="width: 100%">
                <tr>
                    <td align="right">
                        <dxe:ASPxButton ID="ASPxButton1" AutoPostBack="False" runat="server" Text="关闭">
                            <ClientSideEvents Click="function(s, e){ checkComboBox.HideDropDown(); }" />
                        </dxe:ASPxButton>
                    </td>
                </tr>
            </table>
        </DropDownWindowTemplate>
        <ClientSideEvents LostFocus="SynchronizeListBoxValues" ValueChanged="SynchronizeListBoxValues"
            TextChanged="SynchronizeListBoxValues" />
    </dxe:ASPxDropDownEdit>

前台JS：

var textSeparator = ";";
        function OnListBoxSelectionChanged(listBox, args) {
            if (args.index == 0)
                args.isSelected ? listBox.SelectAll() : listBox.UnselectAll();
            UpdateSelectAllItemState();
            UpdateText();
        }
        function UpdateSelectAllItemState() {
            IsAllSelected() ? checkListBox.SelectIndices([0]) : checkListBox.UnselectIndices([0]);
        }
        function IsAllSelected() {
            for (var i = 1; i < checkListBox.GetItemCount(); i++)
                if (!checkListBox.GetItem(i).selected)
                    return false;
            return true;
        }
        function UpdateText() {
            var selectedItems = checkListBox.GetSelectedItems();
            checkComboBox.SetText(GetSelectedItemsText(selectedItems));
        }
        function SynchronizeListBoxValues(dropDown, args) {
            //checkListBox.UnselectAll();
            var texts = dropDown.GetText().split(textSeparator);
            var values = GetValuesByTexts(texts);
            checkListBox.SelectValues(values);
            UpdateSelectAllItemState();
            UpdateText();
        }
        function GetSelectedItemsText(items) {
            var texts = [];
            for (var i = 0; i < items.length; i++)
                if (items[i].index != 0)
                    texts.push(items[i].text);
            return texts.join(textSeparator);
        }
        function GetValuesByTexts(texts) {
            var actualValues = [];
            var value = "";
            for (var i = 0; i < texts.length; i++) {
                value = GetValueByText(texts[i]);
                if (value != null)
                    actualValues.push(value);
            }
            return actualValues;
        }
        function GetValueByText(text) {
            var text = Trim(text).toUpperCase();
            for (var i = 0; i < checkListBox.GetItemCount(); i++)
                if (checkListBox.GetItem(i).text.toUpperCase() == text)
                    return checkListBox.GetItem(i).value;
            return null;
        }
        function Trim(str) {
            return str.replace(/\s*((\S+\s*)*)/, "$1").replace(/((\s*\S+)*)\s*/, "$1");
        }

这是官方提供的JS方法

关于数据绑定，ASPxDropDownEdit他有前台绑定数据源的方式，单个人觉得太麻烦，索性转了个弯不给ASPxDropDownEdit帮数据源，给他模版下的listbox帮数据源虽然没有验证，但我在想这是不是就是我没办法时时取到选中值的原因

后台绑定数据源CS：

/// <summary>
        /// 绑定下拉框
        /// </summary>
        private void BindDataList()
        {
            DataBase db = new DataBase();
            string sql = "select base_bh,base_name from sys_basedata where baseclase_name='01051'";
            try
            {
                DataTable dt = db.ExecuteDataTable(sql);
                if (dt.Rows.Count > 0)
                {
                    ASPxListBox listBox = (ASPxListBox)this.ASPxDropDownEdit1.FindControl("listBox");
                    listBox.DataSource = dt;
                    listBox.TextField = "base_name";
                    listBox.ValueField = "base_bh";
                    listBox.DataBind();

                    ListEditItem item = new ListEditItem("全选", "");
                    listBox.Items.Insert(0, item);
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

取值，这是个关键，我没办法取到时时的值，所以用了个笨方法，根据用户选择的项的文本，去数据源中匹配，匹配到了就取出他的值，但这有要求，文本不能重复，后台数据也不能重复，但考虑实际情况，这种事情应该也不太会发生。

匹配选中值的方法：

/// <summary>
        /// 获取选中项的值
        /// </summary>
        /// <param name="selectText">选中的文本</param>
        /// <returns></returns>
        private string GetSelectedValue(string selectText)
        {
            //获取选中的特性分类的项，根据选中项匹配出像对应的值
            ASPxListBox listBox = (ASPxListBox)this.ASPxDropDownEdit1.FindControl("listBox");
            string str = "";

            string[] text = selectText.Split(';');

            for (int i = 0; i < text.Length; i++)
            {
                for (int j = 0; j < listBox.Items.Count; j++)
                {
                    if (listBox.Items[j].Text == text[i])
                    {
                        str += listBox.Items[j].Value + ";";
                    }
                }
            }
            return str;
        }

这样STR中就包含了所有选中项的值

 我又研究了一个新的方法，可以在页面放一个隐藏的控件，如hidden 然后修改官方给我门的其中一个函数

function GetSelectedItemsText(items) {
            var texts = [];
            for (var i = 0; i < items.length; i++)
                if (items[i].index != 0)
                    texts.push(items[i].text);
            return texts.join(textSeparator);
        }

这是原函数 修改如下：

function GetSelectedItemsText(items) {
            var texts = [];
            for (var i = 0; i < items.length; i++)
                if (items[i].index != 0)
                    texts.push(items[i].text);
            document.getElementById("Hidden1").value = GetValuesByTexts(texts);
            return texts.join(textSeparator);
        }

这样hidden1上存放的就是我们选中的值了，然后后台直接读取这个Hidden的文本，进行解析