ASPxComboBox控件联动效果bug改进

原文: ASPxComboBox控件联动效果bug改进

　　在应用第三方控件DevExpress控件的时候，大家应该对ASPxComboBox控件应该不是很陌生吧，尤其在做多级联动效果的时候，有着它独特的地方，通过前台控制可以实现异步刷新。但是在实际做项目中，我发现它存在一定的问题。

      比如，我们做四级联动效果，四级分别为案件类型、案件性质、性质分类、性质细类，选择案件类型时，触发案件性质数据加载；选择案件性质时，性质分类数据加载，依次类推……；当我们将四级数据都加载到控件中的时候，如果我们重新选择案件类型(第一级)时，此时你会发现，二级内容重新加载了，但是三级四级内容没有清空，也没有变化，应该说这是不符合条件的，针对这个问题，我设计了下面解决方案

      源代码：

   

<table border="1" cellpadding="0" cellspacing="0" style="width:100%">

   <tr>

      <td>

          <dx:ASPxComboBox runat="server" ID="CbxAJLX" ClientInstanceName="cbxAJLX" DropDownStyle="DropDownList" TextField="AJLX" ValueField="AJLX" Width="80px" OnCallback="CbxAJLX_Callback">

              <ClientSideEvents SelectedIndexChanged="function(s, e) { OnAJLXChanged(s); }" />

          </dx:ASPxComboBox>

      </td>

      <td>

          <dx:ASPxComboBox runat="server" ID="CbxAJXZ" ClientInstanceName="cbxAJXZ" DropDownStyle="DropDownList" TextField="AJXZ" ValueField="AJXZ" Width="80px" OnCallback="CbxAJXZ_Callback">

              <ClientSideEvents SelectedIndexChanged="function(s, e) { OnAJXZChanged(s); }" />

          </dx:ASPxComboBox>

      </td>

      <td>

          <dx:ASPxComboBox runat="server" ID="CbxXZFL" ClientInstanceName="cbxXZFL" DropDownStyle="DropDownList" TextField="XZFL" ValueField="XZFL" Width="80px" OnCallback="CbxXZFL_Callback">

              <ClientSideEvents SelectedIndexChanged="function(s, e) { OnXZFLChanged(s); }" />

          </dx:ASPxComboBox>

      </td>

      <td>

          <dx:ASPxComboBox runat="server" ID="CbxXZXL" ClientInstanceName="cbxXZXL" DropDownStyle="DropDownList" TextField="XZXL" ValueField="XZXL" Width="80px" OnCallback="CbxXZXL_Callback">

          </dx:ASPxComboBox>

      </td>

    </tr>

</table>

　　我先解释一下该代码吧，OnCallback事件时用于自身更新数据的，主要时通过上一级事件SelectedIndexChanged触发，其主要内容为cbxAJXZ.PerformCallback(cbxAJLX.GetValue().toString())。

　　针对不能清空问题，在下级数据更新之前，我设计了一个方法，用于清空下级后面的所有联动控件中的数据，代码如下

function OnAJLXChanged(cbxAJLX) {

     myAjlx("clear");

     cbxAJXZ.PerformCallback(cbxAJLX.GetValue().toString());

}

function myAjlx(cmd) {

      if (cmd == "clear") {

            cbxAJXZ.SetValue(null);

            cbxXZFL.SetValue(null);

            cbxXZXL.SetValue(null);

      }

}

　　通过调用上面这段代码可以实现多级数据联动不足的地方，下面是整个脚本

function OnAJLXChanged(cbxAJLX) {

            myAjlx("clear");

            cbxAJXZ.PerformCallback(cbxAJLX.GetValue().toString());

        }

        function OnAJXZChanged(cbxAJXZ) {

            myAjxz("clear");

            cbxXZFL.PerformCallback(cbxAJXZ.GetValue().toString());

        }

        function OnXZFLChanged(cbxXZFL) {

            myXzfl("clear");

            cbxXZXL.PerformCallback(cbxXZFL.GetValue().toString());

        }

        function myYwlx(cmd) {

            if (cmd == "clear") {

                cbxAJLX.SetValue(null);

                cbxAJXZ.SetValue(null);

                cbxXZFL.SetValue(null);

                cbxXZXL.SetValue(null);

            }

        }

        function myAjlx(cmd) {

            if (cmd == "clear") {

                cbxAJXZ.SetValue(null);

                cbxXZFL.SetValue(null);

                cbxXZXL.SetValue(null);

            }

        }

        function myAjxz(cmd) {

            if (cmd == "clear") {

                cbxXZFL.SetValue(null);

                cbxXZXL.SetValue(null);

            }

        }

        function myXzfl(cmd) {

            if (cmd == "clear") {

                cbxXZXL.SetValue(null);

            }

        }

　　注意：最后一级不用调用脚本进行清空

　　本文主要解决了，多级联动过程中，联动数据不能及时清空的问题；本文只代表本人个人观点，希望广大博友提出好的建议和意见，谢谢~