vs2013+MVC3.0+EasyUI的ComboBox联动使用(二)



vs2013+MVC3.0+EasyUI的ComboBox联动使用(二)

简单介绍：在vs2013(.net4.0)中使用MVC3.0对于EasyUI中ComboBox的联动使用。

载入ComboBox数据，而且实现联动效果，

本文将採用EasyUI中的Date控件与ComboBox实现联动效果，如图：

-----------------------------------------------------------------------------------------------------------------------------------------------------

以下主要展现3个有用模块的代码：

Controller(控制)：

    /// <summary>
    /// 依据用户选择的日期获取发货单号
    /// </summary>
    /// <param name="strDate">日期</param>
    /// <returns></returns>
    /// <remarks>创建人员(日期):★彭振★(141016 11:24)</remarks>
    public JsonResult GetSendBillCodeByDate(string strDate)
    {
      ISale_outerListService ser = Sale_outerListService.Instance;
      string json = string.Empty;
      try
      {
        //获取可用快递公司信息
        DataSet ds = ser.GetSendBillCodeByDate(strDate, UserHelper.UserInfo.StorageIds[0]);
        System.Data.DataTable dt = ds.Tables[0];
        if (ds != null && ds.Tables.Count > 0)
        {
          dt = ds.Tables[0];
        }
        else
        {
          return Json(json);
        }
        if (dt != null && dt.Rows.Count > 0)
        {
          List<dynamic> list = new List<dynamic>();
          foreach (System.Data.DataRow dr in dt.Rows)
          {
            list.Add(new
            {
              ID = dr["SendBill_Code"].GetString(),
              Name = dr["SendBill_Code"].GetString()
            });
          }

          //2 查出数据 转 json
          json = list.ToJsonSerialize();
        }
        else
        {
          return Json(json);
        }
      }
      catch (Exception ex)
      {
        json = string.Empty;
      }
      //3 输出
      return Json(json);
    }

-----------------------------------------------------------------------------------------------------------------------------------------------------

Pub(页面)：

    <td style=" width:50px;" class="tbl-label">日期</td>
    <td style=" width:150px;" class="tbl-value">
      <input id="dtSendBillDate" type="text" class="inp-normal" />
    </td>
    <td class="tbl-label">发货单号</td>
    <td class="tbl-value">
      <input type="text" id="SendBill_Code" name="SendBill_Code" class="inp-normal" />
    </td>	

-----------------------------------------------------------------------------------------------------------------------------------------------------

Biz(JS)：

<script language="javascript">
  $(function () {
    //生成easyui的datetimebox
    $('#dtSendBillDate').datebox({
      required: true,
      onSelect: function (date) {
        var year = date.getFullYear().toString();
        var month = (date.getMonth() + 1).toString().length == 1 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
        var day = (date.getDate().toString()).length == 1 ? "0" + date.getDate().toString() : date.getDate().toString();
        var selectdate = year + month + day;
        lodupHelper.getSendBillCodeList(selectdate);
      }
    });

  //lodup 帮助类
  var lodupHelper = {
    getSendBillCodeListUrl: "/Pack/GetSendBillCodeByDate",
    //获取发货单号组
    getSendBillCodeList: function (selectdate) {
      lodupHelper.ajaxasync(lodupHelper.getSendBillCodeListUrl, { strDate: selectdate }, function (data) {
        datasetCode = eval("(" + data + ")");
        comboboxCode = {
          valueField: 'ID',
          textField: 'Name',
          data: datasetCode,
          required: true,
          editable: false
        };
        $('#SendBill_Code').combobox(comboboxCode);
      });
    }
   };
  });
</script>