酷炫的頁面編輯組件

最新接到一個要在頁面上直接編輯數據並將修改數據提交到後端並保存到數據庫中的需求和下拉列表能夠支持查詢功能的需求。之前也作過相似的功能，是本身用html和js寫的，項目好久了代碼也很老了，效果也很差，因此也不想用了。就去請教了專業的前端同事幫助。下面是具體控件的實現代碼，做個筆記之後好找也分享一下。

　　１、下拉列表支持查詢

　　先上效果圖：

控件文檔地址：https://select2.github.io/examples.html

JS引用： 

JS文件下載：http://files.cnblogs.com/files/stevenchen2016/select2.rar

頁面JS引用：

要注意順序哦。

上代碼：

<div class="col-lg-2 col-md-2 col-sm-2 col-break">                
                <label>供應商：</label>
                @Html.DropDownListFor(m => m.Search.BOSupplierId, ValidateController.BindSupplierList(true), new { @class = "js-example-basic-single js-states form-control select2-hidden-accessible" })
            </div>

下拉列表控件中使用這個類樣式@class = "js-example-basic-single js-states form-control select2-hidden-accessible",再爲控件邦定ＪＳ事件　就能夠實現功能了。

js事件代碼以下：

<script type="text/javascript">
            $(document).ready(function () { $("#Search_BOSupplierId").select2(); }); </script>

 

２、頁面編輯控件

js文件：

下載：http://files.cnblogs.com/files/stevenchen2016/bootstrap3-editable.rar

上代碼：

<!--文本編輯-->
<a href="#" class="destination" data-pk="@dataItem.Id" data-type="text" data-title="輸入到達">@dataItem.Destination</a>
<!--下拉列表編輯-->
<a href="#" class="IsOff" data-pk="@dataItem.Id" data-type="select2" data-value="@(dataItem.IsOff)" data-title="是否下線">@(dataItem.IsOff == 1 ? "是" : "否")</a>

參數說明：
class="destination"　：　類樣式名能夠根據數據的屬性名來自定義。

data-pk="@dataItem.Id"　：　設置提交到後端服務時的更新條件值。

data-type="text"　：　顯示的編輯控件類型，text：表示文本框，select2：下拉列表

data-title="輸入到達"　：　編輯框的標題。ata-value="@(dataItem.IsOff)"　：　下拉列表邦定的默認值
JS代碼：控件已提供了ＡＰＩ接口咱們只要調用並傳入參數就ＯＫ了

@section Scripts
{
<!--控件JS文件引用-->
<script src="~/Assist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<!--控件樣式文件引用-->
<link href="~/Assist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />

 <script type="text/javascript"> $(".destination").editable({ type: 'text',//控件類型  name: 'Destination',//更新的屬性名  url: '@Url.Content("~/DestinationMapping/UpdateData")',//提交到後端的url  title: '輸入到達',//編輯框的標題  success: function (response, newValue) {//請求後端成功後的處理方法 if (!response.success) return response.msg; } }); $(".destinationRegion").editable({ type: 'text',//控件類型  name: 'DestinationRegion',//更新的屬性名  url: '@Url.Content("~/DestinationMapping/UpdateData")', title: '到達地所屬城市', success: function (response, newValue) { if (!response.success) return response.msg; } }); $('.IsOff').editable({ //邦定的數據源  source: [ { id: '0', text: '否' }, { id: '1', text: '是' } ], //控件設置  select2: { width: 100, placeholder: '是否下線', allowClear: true }, type: 'select2',//控件類型  name: 'IsOff',//後端更新的屬性名  url: '@Url.Content("~/DestinationMapping/UpdateData")', title: '是否下線', success: function (response, newValue) { if (!response.success) return response.msg; } }) </script> }

最後是後端服務的代碼：

/// <summary>
        /// 列表頁修改數據提交方法
        /// </summary>
        /// <param name="name">修改字段名稱</param>
        /// <param name="value">更新的值</param>
        /// <param name="pk">主鍵ID</param>
        /// <returns>處理結果對象</returns>
        public JsonResult UpdateData(string name, string value, int pk)
        {
            var responseJson = new { success = false, msg = "提交失敗" }; try { if (!string.IsNullOrEmpty(name) || pk > 0) { if (name.Equals("Destination")) { if (Service.Update(new DestinationmappingContract() { Id = pk, Destination = value }, t => t.Id, t => t.Destination)) { responseJson = new { success = true, msg = "提交成功" }; } } else if (name.Equals("DestinationRegion")) { if (Service.Update(new DestinationmappingContract() { Id = pk, DestinationRegion = value }, t => t.Id, t => t.DestinationRegion)) { responseJson = new { success = true, msg = "提交成功" }; } } else if (name.Equals("IsOff")) { if (Service.Update(new DestinationmappingContract() { Id = pk, IsOff = value.ToInt() }, t => t.Id, t => t.IsOff)) { responseJson = new { success = true, msg = "提交成功" }; } } } else { responseJson = new { success = false, msg = "name參數爲null或pk的值小於等於0" }; } } catch (Exception ex) { responseJson = new { success = false, msg = ex.Message }; } return Json(responseJson); }

寫完了。使用中有不懂的能夠給我留言。