一步一步封裝自己的HtmlHelper組件BootstrapHelper（三）
更新時(shí)間：2016年09月14日 09:24:05 作者：懶得安分
一步一步封裝自己的HtmlHelper組件：BootstrapHelper，系列文章第三篇，感興趣的小伙伴們可以參考一下
前言：之前的兩篇封裝了一些基礎(chǔ)的表單組件，這篇繼續(xù)來(lái)封裝幾個(gè)基于bootstrap的其他組件。和上篇不同的是，這篇的有幾個(gè)組件需要某些js文件的支持。
BootstrapHelper系列文章目錄
C#進(jìn)階系列——一步一步封裝自己的HtmlHelper組件：BootstrapHelper
C#進(jìn)階系列——一步一步封裝自己的HtmlHelper組件：BootstrapHelper（二）
C#進(jìn)階系列——一步一步封裝自己的HtmlHelper組件：BootstrapHelper（三：附源碼）
一、NumberBoxExtensions
NumberBoxExtensions是一個(gè)基于bootstrap風(fēng)格的數(shù)字文本框，基于之前博主介紹的自增器數(shù)字組件spinner去做的封裝，不了解spinner組件的園友可以看看http://www.dhdzp.com/article/88490.htm里面介紹的第二個(gè)組件。
通過(guò)之前的介紹我們知道，自增組件spinner的初始化不需要寫任何的js代碼，直接通過(guò)配置html里面的data屬性即可實(shí)現(xiàn)它的初始化，這樣給我們的封裝就帶來(lái)了很大的方便，我們只需要將常用的初始化參數(shù)作為擴(kuò)展方法的參數(shù)傳進(jìn)來(lái)，然后在后臺(tái)變成相應(yīng)的data屬性返回到前端。
廢話不多說(shuō)，先將封裝的源碼擺上來(lái)。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BootstrapExtensions
{
public static class NumberBoxExtensions
{
/// <summary>
/// 生成數(shù)字文本框
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">id</param>
/// <returns>返回?cái)?shù)字文本框</returns>
public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id)
{
return NumberTextBox(html, id, null, null, null, null, null);
}
/// <summary>
/// 生成數(shù)字文本框
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">id</param>
/// <param name="value">文本框的value值</param>
/// <returns>返回?cái)?shù)字文本框</returns>
public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value)
{
return NumberTextBox(html, id, value, null, null, null, null);
}
/// <summary>
/// 生成數(shù)字文本框
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="value">文本框的value值</param>
/// <param name="min">自增長(zhǎng)的最小值</param>
/// <param name="max">自增長(zhǎng)的最大值</param>
/// <returns>返回?cái)?shù)字文本框</returns>
public static MvcHtmlString NumberTextBox(this BootstrapHelper html, object value, int? min, int? max)
{
return NumberTextBox(html, null, value, min, max, null, null);
}
/// <summary>
/// 生成數(shù)字文本框
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">id</param>
/// <param name="value">文本框的value值</param>
/// <param name="min">自增長(zhǎng)的最小值</param>
/// <param name="max">自增長(zhǎng)的最大值</param>
/// <returns>返回?cái)?shù)字文本框</returns>
public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value, int? min, int? max)
{
return NumberTextBox(html, id, value, min, max, null, null);
}
/// <summary>
/// 生成數(shù)字文本框
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">id</param>
/// <param name="value">文本框的value值</param>
/// <param name="min">自增長(zhǎng)的最小值</param>
/// <param name="max">自增長(zhǎng)的最大值</param>
/// <param name="step">每次自增的數(shù)字</param>
/// <returns>返回?cái)?shù)字文本框</returns>
public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value, int? min, int? max, int? step)
{
return NumberTextBox(html, id, value, min, max, step, null);
}
/// <summary>
/// 生成數(shù)字文本框
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">id</param>
/// <param name="value">文本框的value值</param>
/// <param name="min">自增長(zhǎng)的最小值</param>
/// <param name="max">自增長(zhǎng)的最大值</param>
/// <param name="step">每次自增的數(shù)字</param>
/// <param name="rule">自增規(guī)則</param>
/// <returns>返回?cái)?shù)字文本框</returns>
public static MvcHtmlString NumberTextBox(this BootstrapHelper html, string id, object value, int? min, int? max, int? step, SpinningRule? rule)
{
TagBuilder tag = new TagBuilder("div");
tag.MergeAttribute("class", "input-group spinner");
tag.MergeAttribute("data-trigger", "spinner");
System.Text.StringBuilder sb = new System.Text.StringBuilder();
//sb.Append("<input type='text' class='form-control text-center' value='1' data-min='-10' data-max='10' data-step='2' data-rule='quantity'>");
sb.Append("<input type='text' class='form-control text-center' ");
if (!string.IsNullOrEmpty(id))
{
sb.Append("id='").Append(id).Append("' ");
}
if (value != null)
{
sb.Append("value='").Append(value.ToString()).Append("' ");
}
else
{
sb.Append("value='1' ");
}
if (min != null)
{
sb.Append("data-min='").Append(min).Append("' ");
}
if (max != null)
{
sb.Append("data-max='").Append(max).Append("' ");
}
if (step != null)
{
sb.Append("data-step='").Append(step).Append("' ");
}
if (rule != null)
{
sb.Append("data-rule='").Append(rule.ToString()).Append("' ");
}
else
{
sb.Append("data-rule='quantity' ");
}
sb.Append("/>");
sb.Append("<span class='input-group-addon'>");
sb.Append("<a href='javascript;;' class='spin-up' data-spin='up'><i class='fa fa-caret-up'></i></a>");
sb.Append("<a href='javascript:;' class='spin-down' data-spin='down'><i class='fa fa-caret-down'></i></a>");
sb.Append("</span>");
tag.InnerHtml = sb.ToString();
return MvcHtmlString.Create(tag.ToString());
}
}
public enum SpinningRule
{
defaults,
currency,
quantity,
percent,
month,
day,
hour,
minute,
second,
}
}
除去id、value，我們自增組件初始化需要的參數(shù)主要有min、max、step、rule等，分別對(duì)應(yīng)組件的data-min、data-max、data-step、data-rule等參數(shù)。
使用相當(dāng)簡(jiǎn)單，首先在對(duì)應(yīng)的頁(yè)面引用相關(guān)的js和css文件，然后在cshtml里面這樣調(diào)用即可：
復(fù)制代碼 代碼如下:
@Bootstrap.NumberTextBox(null, "1", 1, 10, 2, null)
得到結(jié)果：
這樣比我們每次都去copy一大段html代碼要方便多了吧，你有沒(méi)有一絲心動(dòng)呢~~
二、DateTimeBoxExtensions
有了上面的數(shù)字組件作為基礎(chǔ)，接下來(lái)就是封裝時(shí)間組件了。博主同樣打算使用data屬性去做初始化，可是找了半天文檔，datatimepicker里面沒(méi)有自帶data屬性初始化的方式，沒(méi)辦法，只有博主自己去做data屬性的初始化了。
1、初始方案
我們新建一個(gè)文件：bootstrap-datetimepicker-helper.js。里面的代碼如下
$(function () {
var datetimedefault = {
locale: 'zh-CN', //中文化
};
$.each($(".date"), function (index, item) {
var data = $(item).data();
var param = $.extend({}, datetimedefault, data || {});
$(item).datetimepicker(param);
});
});
然后html代碼這樣寫
<div class='input-group date' data-format="YYYY-MM-DD" data-maxDate="2017-01-10" data-minDate="2010-01-10"> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div>
貌似都沒(méi)有問(wèn)題，起初博主也以為沒(méi)有任何問(wèn)題?？墒鞘屡c愿違！這里有一點(diǎn)博主沒(méi)有考慮到，那就是Jquery里面的data()方法取到的屬性名會(huì)全部轉(zhuǎn)小寫，也就是說(shuō)，我們html里面寫的data-maxDate，可是通過(guò)data()方法得到的結(jié)果卻變成了maxdate，如下圖：
然后在初始化datetimepicker的時(shí)候就報(bào)了js異常。此法行不通。
2、改進(jìn)方案
既然上面的方法行不通，那我們就要改進(jìn)啊，data()方法是否存在什么參數(shù)可以讓它不轉(zhuǎn)小寫的？找了一圈，沒(méi)找到啥答案。最后沒(méi)辦法，博主打算自行改造，于是js代碼變成了這樣：
$(function () {
var datetimedefault = {
format: 'YYYY-MM-DD',//日期格式化，只顯示日期
locale: 'zh-CN', //中文化
maxDate: '2017-01-01',//最大日期
minDate: '2010-01-01', //最小日期
viewMode: 'days',
defaultDate: false,
disabledDates: false,
enabledDates: false,
};
$.each($(".date"), function (index, item) {
var data = $(item).data();
$.each(data, function (key, value) {
for (i in datetimedefault) {
if (key == i.toLowerCase()) {
datetimedefault[i] = value;
break;
}
}
});
//var param = $.extend({}, datetimedefault, data || {});
$(item).datetimepicker(datetimedefault);
});
});
原理就是比較data()方法得到的結(jié)果和datetimedefault的屬性名轉(zhuǎn)小寫后進(jìn)行對(duì)比，如果相同，則將html里面的data屬性覆蓋默認(rèn)的屬性。調(diào)試了幾遍，基本沒(méi)發(fā)現(xiàn)什么問(wèn)題。
代碼寫成這樣，確實(shí)可以解決我們上面的問(wèn)題，但是需要我們的datetimedefault變量里面包含足夠多的默認(rèn)參數(shù)，這樣才能達(dá)到覆蓋的目的，當(dāng)然項(xiàng)目中一般修改的就那么幾個(gè)參數(shù)，這里只需要加上一些我們經(jīng)常需要變化的默認(rèn)屬性即可。
好了，有上面的作為理論基礎(chǔ)，我們的DataTimeBox也就好封裝了。直接上代碼吧。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BootstrapExtensions
{
public static class DateTimeBoxExtensions
{
/// <summary>
/// 生成日期控件
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">文本框標(biāo)簽的id</param>
/// <returns>返回呈現(xiàn)日期控件的html標(biāo)簽</returns>
public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id)
{
return DateTimeBox(html, id, null, null, null, null, null, null);
}
/// <summary>
/// 生成日期控件
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">文本框標(biāo)簽的id</param>
/// <param name="value">文本框標(biāo)簽的默認(rèn)值</param>
/// <returns>返回呈現(xiàn)日期控件的html標(biāo)簽</returns>
public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id, object value)
{
return DateTimeBox(html, id, value, null, null, null, null, null);
}
/// <summary>
/// 生成日期控件
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">文本框標(biāo)簽的id</param>
/// <param name="value">文本框標(biāo)簽的默認(rèn)值</param>
/// <param name="format">顯示日期的格式</param>
/// <param name="maxDate">日期的最小值</param>
/// <param name="minDate">日期的最大值</param>
/// <returns>返回呈現(xiàn)日期控件的html標(biāo)簽</returns>
public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id, object value, string format, string maxDate, string minDate)
{
return DateTimeBox(html, id, value, format, maxDate, minDate, null, null);
}
/// <summary>
/// 生成日期控件
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">文本框標(biāo)簽的id</param>
/// <param name="value">文本框標(biāo)簽的默認(rèn)值</param>
/// <param name="format">顯示日期的格式</param>
/// <param name="maxDate">日期的最小值</param>
/// <param name="minDate">日期的最大值</param>
/// <param name="viewMode">日期控件的瀏覽模式</param>
/// <param name="showClear">是否顯示清空按鈕</param>
/// <returns>返回呈現(xiàn)日期控件的html標(biāo)簽</returns>
public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id, object value, string format, string maxDate, string minDate, string viewMode, bool? showClear)
{
TagBuilder tag = new TagBuilder("div");
tag.MergeAttribute("class", "input-group date");
if (!string.IsNullOrEmpty(format))
{
tag.MergeAttribute("data-format", format);
}
if (!string.IsNullOrEmpty(maxDate))
{
tag.MergeAttribute("data-maxDate", maxDate);
}
if (!string.IsNullOrEmpty(minDate))
{
tag.MergeAttribute("data-minDate", minDate);
}
if (!string.IsNullOrEmpty(viewMode))
{
tag.MergeAttribute("data-viewMode", viewMode);
}
if (showClear!=null)
{
tag.MergeAttribute("data-showClear", showClear.ToString());
}
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<input type='text' class='form-control'");
if(!string.IsNullOrEmpty(id))
{
sb.Append("id='").Append(id).Append("' ");
}
if (value != null)
{
sb.Append("value='").Append(value.ToString()).Append("' ");
}
sb.Append("/>").Append("<span class='input-group-addon'>")
.Append("<span class='glyphicon glyphicon-calendar'></span>")
.Append("</span>");
tag.InnerHtml = sb.ToString();
return MvcHtmlString.Create(tag.ToString());
}
}
}
然后我們的cshtml頁(yè)面只需要引用我們的js和css
<link href="~/Content/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet" /> <script src="~/Content/bootstrap-datetimepicker/js/moment-with-locales.js"></script> <script src="~/Content/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script> <script src="~/Content/bootstrap-datetimepicker/js/bootstrap-datetimepicker-helper.js"></script>
然后直接使用
<div class="col-xs-3">
@Bootstrap.DateTimeBox("starttime", null, null, null, null, null, null)
</div>
<div class="col-xs-3">
@Bootstrap.DateTimeBox("endtime", null, null, null, null, null, null)
</div>
得到結(jié)果
三、TextareExtensions
關(guān)于textarea文本域的封裝相對(duì)來(lái)說(shuō)是比較簡(jiǎn)單的，因?yàn)楸旧硭慕Y(jié)構(gòu)和TextBox就差不多，我們直接給出封裝的源碼吧。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BootstrapExtensions
{
public static class TextareExtensions
{
/// <summary>
/// textarea文本域
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">id</param>
/// <returns>html標(biāo)簽</returns>
public static MvcHtmlString TextAreaBox(this BootstrapHelper html, string id)
{
return TextAreaBox(html, id, null, null, null, null);
}
/// <summary>
/// textarea文本域
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">id</param>
/// <param name="value">value</param>
/// <param name="cssClass">樣式</param>
/// <returns>html標(biāo)簽</returns>
public static MvcHtmlString TextAreaBox(this BootstrapHelper html, string id, object value, string cssClass)
{
return TextAreaBox(html, id, value, cssClass, null, null);
}
/// <summary>
/// textarea文本域
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">id</param>
/// <param name="value">value</param>
/// <param name="cssClass">樣式</param>
/// <param name="rows">行數(shù)</param>
/// <returns>html標(biāo)簽</returns>
public static MvcHtmlString TextAreaBox(this BootstrapHelper html, string id, object value, string cssClass, int? rows)
{
return TextAreaBox(html, id, value, cssClass, rows, null);
}
/// <summary>
/// textarea文本域
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">id</param>
/// <param name="value">value</param>
/// <param name="cssClass">樣式</param>
/// <param name="rows">行數(shù)</param>
/// <param name="cols">列數(shù)</param>
/// <returns>html標(biāo)簽</returns>
public static MvcHtmlString TextAreaBox(this BootstrapHelper html, string id, object value, string cssClass, int? rows, int? cols)
{
TagBuilder tag = new TagBuilder("textarea");
tag.AddCssClass("form-control");
if (!string.IsNullOrEmpty(id))
{
tag.MergeAttribute("id", id);
}
if (value != null)
{
tag.MergeAttribute("value", value.ToString());
}
if (!string.IsNullOrEmpty(cssClass))
{
tag.AddCssClass(cssClass);
}
if (rows != null)
{
tag.MergeAttribute("rows", rows.ToString());
}
if (cols != null)
{
tag.MergeAttribute("cols", cols.ToString());
}
return MvcHtmlString.Create(tag.ToString());
}
}
}
只支持幾個(gè)最簡(jiǎn)單的參數(shù)rows和cols，如果你的項(xiàng)目有一些特殊的需求，比如需要初始化成富文本編輯框，你也可以自己去改進(jìn)。
使用方法
<div>
@Bootstrap.TextAreaBox("id", "", "", 3, 5)
</div>
這里有一個(gè)問(wèn)題要提一下，就是我們直接這樣寫，得到的結(jié)果卻是：
貌似我們的cols屬性沒(méi)有起作用，原來(lái)，只要你的標(biāo)簽加了class='form-control'樣式，那它就會(huì)在滿撐整個(gè)div，解決的方法也很簡(jiǎn)單，比如我們可以在div上面做些處理：
復(fù)制代碼 代碼如下:
<div> @Bootstrap.TextAreaBox("", "", "", 3, 5) </div>
既然cols屬性沒(méi)有起作用，其實(shí)參數(shù)里面的cols可以考慮去掉。
四、SelectExtensions
又到了糾結(jié)的select下拉框。為什么說(shuō)它糾結(jié)呢，因?yàn)榉庋b它的時(shí)候要考慮很多問(wèn)題，比如：
<optgroup>和<option>如何處理靜態(tài)的option值如何傳到后臺(tái)是封裝原始的select還是封裝成基于某些組件（比如select2）的select方法和事件該如何處理等等
后來(lái)轉(zhuǎn)念一想，封裝的目的是為了什么？不就是為了使用起來(lái)更加方便嗎，如果封得太死，使用起來(lái)能夠方便嗎？后來(lái)所幸直接封裝成最簡(jiǎn)單的select算了。博主打算這樣做：
如果是靜態(tài)的option，直接寫原生的select標(biāo)簽；如果是動(dòng)態(tài)的option，則傳遞對(duì)應(yīng)的url到后臺(tái)，取到數(shù)據(jù)后生成option。封裝的代碼如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BootstrapExtensions
{
public static class SelectExtensions
{
/// <summary>
/// 返回select標(biāo)簽
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">標(biāo)簽id</param>
/// <returns>select標(biāo)簽</returns>
public static MvcHtmlString SelectBox(this BootstrapHelper html, string id)
{
return SelectBox(html, id, null, null, null, null, null, null);
}
/// <summary>
/// 返回select標(biāo)簽
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">標(biāo)簽id</param>
/// <param name="value">標(biāo)簽選中值</param>
/// <returns>select標(biāo)簽</returns>
public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value)
{
return SelectBox(html, id, value, null, null, null, null, null);
}
/// <summary>
/// 返回select標(biāo)簽
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">標(biāo)簽id</param>
/// <param name="value">標(biāo)簽選中值</param>
/// <param name="cssClass">標(biāo)簽樣式</param>
/// <returns>select標(biāo)簽</returns>
public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value, string cssClass)
{
return SelectBox(html, id, value, cssClass, null, null, null, null);
}
/// <summary>
/// 返回select標(biāo)簽
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">標(biāo)簽id</param>
/// <param name="value">標(biāo)簽選中值</param>
/// <param name="cssClass">標(biāo)簽樣式</param>
/// <param name="url">請(qǐng)求數(shù)據(jù)的url</param>
/// <param name="textField">顯示字段</param>
/// <param name="valueField">值字段</param>
/// <returns>select標(biāo)簽</returns>
public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value, string cssClass, string url, string textField, string valueField)
{
return SelectBox(html, id, value, cssClass, url, null, textField, valueField);
}
/// <summary>
/// 返回select標(biāo)簽
/// </summary>
/// <param name="html">擴(kuò)展方法實(shí)例</param>
/// <param name="id">標(biāo)簽id</param>
/// <param name="value">標(biāo)簽選中值</param>
/// <param name="cssClass">標(biāo)簽樣式</param>
/// <param name="url">請(qǐng)求數(shù)據(jù)的url</param>
/// <param name="param">請(qǐng)求的參數(shù)</param>
/// <param name="textField">顯示字段</param>
/// <param name="valueField">值字段</param>
/// <param name="multiple">是否多選</param>
/// <returns>select標(biāo)簽</returns>
public static MvcHtmlString SelectBox(this BootstrapHelper html, string id, object value, string cssClass, string url, string param, string textField, string valueField, bool multiple = false)
{
TagBuilder tag = new TagBuilder("select");
tag.AddCssClass("form-control");
if (!string.IsNullOrEmpty(id))
{
tag.MergeAttribute("id", id);
}
if (value != null)
{
tag.MergeAttribute("value", value.ToString());
}
if (!string.IsNullOrEmpty(cssClass))
{
tag.AddCssClass(cssClass);
}
if (!string.IsNullOrEmpty(url))
{
tag.MergeAttribute("data-url", url);
}
if (!string.IsNullOrEmpty(param))
{
tag.MergeAttribute("data-param", param);
}
if (!string.IsNullOrEmpty(valueField))
{
tag.MergeAttribute("data-value-field", valueField);
}
if (!string.IsNullOrEmpty(textField))
{
tag.MergeAttribute("data-text-field", textField);
}
if (multiple)
{
tag.MergeAttribute("multiple", "multiple");
}
return MvcHtmlString.Create(tag.ToString());
}
}
}
然后前端使用js去初始化，需要有一個(gè)js文件utility.combobox.js：
(function ($) {
//1.定義jquery的擴(kuò)展方法combobox
$.fn.combobox = function (options, param) {
if (typeof options == 'string') {
return $.fn.combobox.methods[options](this, param);
}
//2.將調(diào)用時(shí)候傳過(guò)來(lái)的參數(shù)和default參數(shù)合并
options = $.extend({}, $.fn.combobox.defaults, options || {});
//3.添加默認(rèn)值
var target = $(this);
target.attr('valuefield', options.valueField);
target.attr('textfield', options.textField);
target.empty();
var option = $('<option></option>');
option.attr('value', '');
option.text(options.placeholder);
target.append(option);
//4.判斷用戶傳過(guò)來(lái)的參數(shù)列表里面是否包含數(shù)據(jù)data數(shù)據(jù)集，如果包含，不用發(fā)ajax從后臺(tái)取，否則否送ajax從后臺(tái)取數(shù)據(jù)
if (options.data) {
init(target, options.data);
}
else {
//var param = {};
options.onBeforeLoad.call(target, options.param);
if (!options.url) return;
if (typeof options.param == "string") {
options.param = JSON.parse(options.param);
}
$.getJSON(options.url, options.param, function (data) {
init(target, data);
});
}
function init(target, data) {
$.each(data, function (i, item) {
var option = $('<option></option>');
option.attr('value', item[options.valueField]);
option.text(item[options.textField]);
target.append(option);
});
options.onLoadSuccess.call(target);
}
target.unbind("change");
target.on("change", function (e) {
if (options.onChange)
return options.onChange(target.val());
});
}
//5.如果傳過(guò)來(lái)的是字符串，代表調(diào)用方法。
$.fn.combobox.methods = {
getValue: function (jq) {
return jq.val();
},
setValue: function (jq, param) {
jq.val(param);
},
load: function (jq, url) {
$.getJSON(url, function (data) {
jq.empty();
var option = $('<option></option>');
option.attr('value', '');
option.text('請(qǐng)選擇');
jq.append(option);
$.each(data, function (i, item) {
var option = $('<option></option>');
option.attr('value', item[jq.attr('valuefield')]);
option.text(item[jq.attr('textfield')]);
jq.append(option);
});
});
}
};
//6.默認(rèn)參數(shù)列表
$.fn.combobox.defaults = {
url: null,
param: null,
data: null,
valueField: 'value',
textField: 'text',
placeholder: '請(qǐng)選擇',
onBeforeLoad: function (param) { },
onLoadSuccess: function () { },
onChange: function (value) { }
};
//這一段是新加的，在頁(yè)面初始化完成之后調(diào)用初始化方法
$(document).ready(function () {
$('select').each(function () {
var $combobox = $(this);
$.fn.combobox.call($combobox, $combobox.data());
})
});
})(jQuery);
這個(gè)js文件來(lái)源于博主之前的一篇文章http://www.dhdzp.com/article/92595.htm
然后前端調(diào)用
<div class="col-xs-2">
@Bootstrap.SelectBox("sel", null, null, "/Home/GetDept", null, "Name", "Id")
</div>
五、總結(jié)
至此，我們BootstrapHelper第一個(gè)版本的封裝基本算是完成了，主要封裝的組件有如下幾個(gè)：
當(dāng)然還有大家最喜歡源碼分享了。源碼地址
如果你覺(jué)得本文能夠幫到你，請(qǐng)幫忙推薦吧。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- MVC HtmlHelper擴(kuò)展類(PagingHelper)實(shí)現(xiàn)分頁(yè)功能
- 一步一步封裝自己的HtmlHelper組件BootstrapHelper（二）
- C# 封裝HtmlHelper組件：BootstrapHelper
- ASP.NET MVC HtmlHelper如何擴(kuò)展
- ASP.NET MVC4 HtmlHelper擴(kuò)展類，實(shí)現(xiàn)分頁(yè)功能
- ASP.NET MVC中HtmlHelper控件7個(gè)大類中各個(gè)控件使用詳解
- asp.net 圖片驗(yàn)證碼的HtmlHelper
- ASP.NET MVC擴(kuò)展HtmlHelper方法
相關(guān)文章
微信小程序城市定位的實(shí)現(xiàn)實(shí)例（獲取當(dāng)前所在國(guó)家城市信息）
這篇文章給大家認(rèn)真介紹了微信小程序城市定位的實(shí)現(xiàn)實(shí)例，主要實(shí)現(xiàn)了獲取當(dāng)前所在國(guó)家城市信息的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-05-05
基于JavaScript實(shí)現(xiàn)單選框下拉菜單添加文件效果
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)單選框下拉菜單添加文件效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
原生JavaScript+LESS實(shí)現(xiàn)瀑布流
這篇文章主要介紹了原生JavaScript+LESS實(shí)現(xiàn)瀑布流的方法，附上了具體實(shí)例，這里推薦給有需要的小伙伴。2014-12-12
這篇文章主要介紹了JS數(shù)組去重的6種方法,結(jié)合完整實(shí)例形式總結(jié)分析了javascript針對(duì)數(shù)組去除重復(fù)項(xiàng)的相關(guān)原理與操作技巧,需要的朋友可以參考下2018-12-12
今天把JS控制checkbox全選、取消全選、刪除功能的代碼貼出來(lái)。。2008-12-12
js二維碼生成插件jquery.qrcode.js如何自定義LOGO
介紹如何將jquery.qrcode.min.js與jquery集成到網(wǎng)頁(yè)中,生成帶LOGO的二維碼,提供了修改代碼以支持LOGO上傳的步驟,并給出注意事項(xiàng)以確保二維碼的識(shí)別效果2024-11-11
js深度合并兩個(gè)數(shù)組對(duì)象的實(shí)現(xiàn)
這篇文章主要介紹了js深度合并兩個(gè)數(shù)組對(duì)象的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
關(guān)于var在for循環(huán)遇到的問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于var在for循環(huán)遇到的問(wèn)題的幾種解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
這篇文章主要介紹了微信小程序鏈接傳參并跳轉(zhuǎn)新頁(yè)面的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
這篇文章主要為大家詳細(xì)介紹了Bootstrap縮略圖與警告框?qū)W習(xí)使用的相關(guān)資料，希望通過(guò)這篇文章和大家更多的去學(xué)習(xí)Bootstrap縮略圖與警告框，從中得到收獲2017-02-02