从界面上可以看到我们这里用到的控件有

查询功能实现：

第一步：数据库

1、表与关系：

（1）付款方式定义关系图

创建日期控件界面代码：

<div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><input id="dtpKaiShiShiJian" class="easyui-datebox" style="width: 95px; height: 28px" data-options="editable:false,formatter:RiQi" ></span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><input id="dtpJieShuJian" class="easyui-datebox" style="width: 95px; height: 28px" data-options="editable:false,formatter:RiQi" /></span></div>

赋值给界面控件代码：

</pre><pre name="code" class="javascript"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">//设置时间的默认值</span></div><div style="text-align: left;"> function SetStarRiQi() {</div><div style="text-align: left;">    var curr_time = new Date();//获取当前时间</div><div style="text-align: left;">    var strDate = curr_time.getFullYear() + "-";//获取年和拼接字符“-”</div><div style="text-align: left;">    var vMon = curr_time.getMonth() - 2;//获取月，减2是为了获取前3个月，获取月是从0~11，0就是一月···</div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">    var vDay = curr_time.getDate();//获取天</span></div><div style="text-align: left;">    strDate += (vMon < 10 ? "0" + vMon : vMon) + "-";//这里有一个三目运运算符，vMon < 10是判断条件，如果符合条件就返回（"0" + vMon），否则就返回（vMon）</div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">    strDate += (vDay < 10 ? "0" + vDay : vDay);</span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">    $('#dtpKaiShiShiJian').datebox('setValue', strDate);//给日期控件赋值</span></div><div style="text-align: left;">}</div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">    var date = curr_time.getFullYear() + "-" + curr_time.getMonth() + 1 + curr_time.getDate();</span></div><div style="text-align: left;">    $('#dtpJieShuJian').datebox('setValue', date);</div>

获取界面控件的值代码：

$('#dtpKaiShiShiJian').datebox("getValue")

更改样式代码：

<div style="text-align: left;">//转换时间格式</div><div style="text-align: left;"> function RiQi(date) {</div><div style="text-align: left;">    var y = date.getFullYear();</div><div style="text-align: left;">    var m = date.getMonth() + 1;</div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">    var d = date.getDate();</span></div><div style="text-align: left;">    return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);</div><div style="text-align: left;">}</div>

2、下拉框（easyui-combobox）

下拉框截图：

创建下拉框控件界面代码：

<input id="cboAnJieJiXiBanFa2" class="easyui-combobox" style="width:133px" />

下拉框的存储过程：

</pre><pre name="code" class="sql"><div style="text-align: left;">if @type='Banding_JiXi'--绑定下拉框</div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">     begin</span></div><div style="text-align: left;">     SELECT     AttributeAssembleDetailID, AttributeAssembleDetailName,      AttributeAssembleID</div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">FROM         SYS_AttributeAssembleDetailTable</span></div><div style="text-align: left;">     where  SYS_AttributeAssembleDetailTable.AttributeAssembleID=17  </div>

注：where是条件的意思

下拉框的逻辑层：

<div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"></span></div><pre name="code" class="csharp" style="text-align: left;"><div style="text-align: left;">#region 查询绑定计息方法</div><div style="text-align: left;">        public DataTable JiXiBangDing()</div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">        {</span></div><div style="text-align: left;">            SqlParameter[] SQlCMDpas = {</div><div style="text-align: left;">                                             new SqlParameter("@Type", SqlDbType.Char),</div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">                                            </span></div>                                        };
<div>            DataTable dt = myDALMethod.DAL_SelectDB_Par("PW_PaymentType", SQlCMDpas);</div>            SQlCMDpas[0].Value = "Banding_JiXi";return dt;}
<div>        #endregion</div>

下拉框的控制器代码：

<div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"></span></div><pre name="code" class="csharp" style="text-align: left;"><div style="text-align: left;">#region 绑定计息</div><div style="text-align: left;"></div><div style="text-align: left;">        public ActionResult bangdingJiXi()</div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">        {</span></div><div style="text-align: left;">            DataTable dt = myfrmXiangMuChuShiHua.JiXiBangDing();</div><div style="text-align: left;">            List<Dictionary<string, object>> ListReturn = ConvertHelper.DtToList(dt);</div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">            return Json(ListReturn, JsonRequestBehavior.AllowGet);//格式相同</span></div>        }<div>        #endregion</div>

绑定数值到下拉框的代码（也就是jQuery代码）$.getJSON("/FuKuanFangShiDingYi/bangdingJiXi",function (data) {   //注：“cboAnJieJiXiBanFa2'”就是下拉框控件的ID$('#cboAnJieJiXiBanFa2').combobox({ data: data, valueField:
'AttributeAssembleDetailID',textField: 'AttributeAssembleDetailName'});BangDing1++;});

3、进度条的使用：

进度条的截图

进度条jQuery代码：

</pre><pre name="code" class="javascript" style="text-align: left;"><div style="text-align: left;">var BangDing;//进度条方法</div><div style="text-align: left;">   function start() {</div><div style="text-align: left;"></div><div style="text-align: left;">       $('#wstart').window('open');</div><div style="text-align: left;">       var value = $('#p').progressbar('getValue');</div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">       if (value < 100) {</span></div>
<div>           $('#p').progressbar('setValue', value);</div>           value = BangDing * 35;
<div>       else {</div>           setTimeout(arguments.callee, 200);}
<div>           $('#wstart').window('close');</div>           BindingMingXi();$('#p').progressbar('setValue', 0);
<div>   }</div>           BangDing = 0;
<div>       }</div>

</pre><p style="text-align: left;"></p><p style="text-align: left;">//‘BangDing’ 为声明的一个参数，它代表要加载的这个窗体的要绑定数据的下拉框个数，必须在下拉框代码中插入。如图：</p><div style="text-align: left;"><img src="https://img-blog.csdn.net/20150528205350053?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR1hfV3VaaGVuSmlhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></div><div style="text-align: left;"></div><pre name="code" class="csharp"><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><div style="text-align: justify;"></span></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"></div></span></div>

进度条窗体代码：

<div style="text-align: left;">    <div id="wstart" class="easyui-window" title="数据加载中"  data-options="modal:true,iconCls:'icon-产品资料'" style="width:440px;height:100px;padding:10px;  top: 150px; left:300px;"></div><div style="text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">        <div id="p"   class="easyui-progressbar" style="width:400px;"></div></span></div><div style="text-align: left;">   </div>@*//进度条窗口*@</div>