ASP.NET MVC+BUI實現表格的操做

時間 2019-11-06

標籤 asp.net asp mvc+bui mvc bui 實現表格欄目 ASP 简体版

原文原文鏈接

在Web中基於表格的操做，好比添加行、單元格內容編輯等等功能，是徹底基於js實現的。但若是程序員徹底使用js或者jquery去編寫表格控件，則會致使樣式不統一，代碼量較大等問題，尤爲對於不太熟悉js的後端程序員來講，可能會是一個挑戰。所以，網絡上出現了不少基於表格操做的js控件，幫助程序員尤爲是後端程序員也可以編寫出漂亮的基於表格的應用。本篇博客以ASP.NET MVC+BUI爲例，看如何實現基於表格的分頁查詢、編輯、刪除等功能。javascript

首先介紹一下BUI。BUI是基於jQuery開發的輕量級的控件庫，官網連接爲：http://www.builive.com/demo/index.php。程序員只要參照示例中的js代碼，提供後端數據源部分，就能實現數據操做。要使用bui首先要去官網下載bui控件包，將其文件放入到ASP.NET MVC項目中的Scripts目錄下，而後在cshtml文件中引用css、js便可。php

咱們這篇博客要實現的功能大概以下。首先點擊查詢按鈕，顯示出當前的數據（支持分頁）。css

點擊修改時出現的界面，會加載選中表格的行的數據。html

點擊刪除，會出現對話框。點擊肯定按鈕，會刪除對應表格的行的信息，並自動刷新表格內容。前端

完整的cshtml部分代碼：java

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>檔案修改</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href=@Url.Content("~/Scripts/bui/css/dpl-min.css") rel="stylesheet" type="text/css" />
    <link href=@Url.Content("~/Scripts/bui/css/bui-min.css") rel="stylesheet" type="text/css" />
    <link href=@Url.Content("~/Scripts/bui/css/page-min.css") rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        <form id="searchForm" class="form-horizontal">
        <div class="row">
            <div class="control-group span8">
                <label class="control-label">
                    單位代碼：
                </label>
                <div class="controls">
                    <input type="text" class="control-text" name="dwdm" id="dwdm" />
                </div>
            </div>
            <div class="control-group span8">
                <label class="control-label">
                    工做單位：
                </label>
                <div class="controls">
                    <input type="text" class="control-text" name="gzdw" id="gzdw" />
                </div>
            </div>
            <div class="control-group span8">
                <label class="control-label">
                    我的社保代碼：
                </label>
                <div class="controls">
                    <input type="text" class="control-text" name="grsbdm" id="grsbdm" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label">
                    姓名：
                </label>
                <div class="controls">
                    <input type="text" class="control-text" name="xm" id="xm" />
                </div>
            </div>
            <div class="control-group span8">
                <label class="control-label">
                    身份證號碼：
                </label>
                <div class="controls">
                    <input type="text" class="control-text" name="sfzhm" id="sfzhm" />
                </div>
            </div>
            <div class="control-group span8">
                <label class="control-label">
                    檔案號：
                </label>
                <div class="controls">
                    <input type="text" class="control-text" name="dah" id="dah" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label">
                    工做年月：
                </label>
                <div class="controls">
                    <input type="text" name="gzny" id="gzny" />
                </div>
            </div>
            <div class="control-group span8">
                <label class="control-label">
                    退休年月：
                </label>
                <div class="controls">
                    <input type="text" name="txny" id="txny" />
                </div>
            </div>
            <div class="span3 offset1">
                <button type="button" id="btnSearch" class="button button-primary">
                    查詢
                </button>
            </div>
        </div>
        </form>
        <div id="content" class="hide">
            <form class="form-horizontal">
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">
                        <s>*</s>單位代碼</label>
                    <div class="controls">
                        <input name="DWDM" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
                <div class="control-group span8">
                    <label class="control-label">
                        <s>*</s>工做單位</label>
                    <div class="controls">
                        <input name="GZDW" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">
                        <s>*</s>我的社保代碼</label>
                    <div class="controls">
                        <input id="grsbdm_val" name="GRSBDM" type="text" data-rules="{required:true}" class="input-normal control-text">
                        <input id="grsbdm_old_val" name="GRSBDM" type="hidden" />
                        <input id="smr_old_val" name="SMR" type="hidden" />
                    </div>
                </div>
                <div class="control-group span8">
                    <label class="control-label">
                        <s>*</s>檔案號</label>
                    <div class="controls">
                        <input id="dah_val" name="DAH" type="text" data-rules="{required:true,number : true}"
                            class="input-normal control-text">
                        <input id="dah_old_val" name="DAH" type="hidden" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">
                        <s>*</s>姓名</label>
                    <div class="controls">
                        <input name="XM" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
                <div class="control-group span8">
                    <label class="control-label">
                        <s>*</s>身份證號</label>
                    <div class="controls">
                        <input name="SFZHM" type="text" data-rules="{required:true}" class="input-normal control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8 ">
                    <label class="control-label">
                        工做年月</label>
                    <div class="controls">
                        <input type="text" name="GZNY" id="gzny" />
                    </div>
                </div>
                <div class="control-group span8 ">
                    <label class="control-label">
                        退休年月</label>
                    <div class="controls">
                        <input type="text" name="TXNY" id="txny" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span15">
                    <label class="control-label">
                        退休類型</label>
                    <div class="controls control-row4">
                        <textarea name="TXLX" class="input-large" type="text"></textarea>
                    </div>
                </div>
            </div>
            </form>
        </div>
        <div class="search-grid-container">
            <div id="grid">
            </div>
        </div>
    </div>
    <script src='@Url.Content("~/Scripts/bui/js/jquery-1.8.1.min.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/Scripts/bui/js/bui-min.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/Scripts/bui/js/config-min.js")' type="text/javascript"></script>
    <script type="text/javascript">
        BUI.use(['common/search', 'common/page'], function (Search) {
            var Grid = BUI.Grid,
            Data = BUI.Data;
            var Grid = Grid,
            Store = Data.Store,
            enumObj = { "1": "男", "0": "女" },
            columns = [
                { title: '檔案號', dataIndex: 'DAH', width: 50 },
                { title: '單位代碼', dataIndex: 'DWDM', width: 60 },
                { title: '工做單位', dataIndex: 'GZDW', width: 200 },
                { title: '我的社保代碼', dataIndex: 'GRSBDM', width: 100 },
                { title: '姓名', dataIndex: 'XM', width: 60 },
                { title: '身份證號碼', dataIndex: 'SFZHM', width: 150 },
                { title: '工做年月', dataIndex: 'GZNY', width: 80 },
                { title: '退休年月', dataIndex: 'TXNY', width: 80 },
                { title: '退休類型', dataIndex: 'TXLX', width: 60 },
                { title: '狀態', dataIndex: 'YXBZ', width: 60, renderer: function (v) {
                    if (v == "0") {
                        delStr = '<span>正常</span>';
                    } else if(v == "1"){
                        delStr = '<span>死亡</span>';
                    }else if(v == "2"){
                        delStr = '<span>刪除</span>';
                    }
                    return delStr;
                }},
                { title: '掃描人', dataIndex: 'SMR', width: 80 },
                { title: '操做', width: 80, renderer: function () {
                    //                    var editStr = Search.createLink({ //連接使用 此方式
                    //                        id: 'edit' + obj.id,
                    //                        title: '編輯檔案信息',
                    //                        text: '編輯',
                    //                        href: 'search/edit.html'
                    //                    }),
                    var editStr = '<span class="grid-command btn-edit" title="修改檔案信息">修改</span>';
                    delStr = '<span class="grid-command btn-del" title="刪除檔案信息">刪除</span>'; //頁面操做不須要使用Search.createLink
                    return editStr + delStr;
                }
                }
            ],
            store = new Store({
                url: '@Url.Action("DACXResult", "CXDY")',
                params: {
                    dwdm: $("#dwdm").val(),
                    gzdw: $("#gzdw").val(),
                    grsbdm: $("#grsbdm").val(),
                    xm: $("#xm").val(),
                    sfzhm: $("#sfzhm").val(),
                    dah: $("#dah").val(),
                    gzny: $("#gzny").val(),
                    txny: $("#txny").val()
                },
                autoLoad: true, //自動加載數據
                pageSize: 10// 配置分頁數目
            }),
            editing = new Grid.Plugins.DialogEditing({
                contentId: 'content', //彈出框顯示的內容的id
                triggerCls: 'btn-edit', //點擊表格行時觸發編輯的 css
                autoUpdate: false,
                editor: {
                    title: '退休人員信息修改',
                    success: function () {
                        var editor = this,
                        form = editor.get('form'),
                        editType = editing.get('editType');
                        form.valid();
                        if (form.isValid()) {
                            form.ajaxSubmit({
                                dataType: "text",
                                url: '@Url.Action("ModifyRY", "DAManage")',
                                data: {
                                    'grsbdm_val': $("#grsbdm_val").val(),
                                    'grsbdm_old_val': $("#grsbdm_old_val").val(),
                                    'dah_val':$("#dah_val").val(),
                                    'dah_old_val': $("#dah_old_val").val(),
                                },
                                success: function (data) {
                                    if (data == 'fail') {
                                        BUI.Message.Alert(data.Message, 'error');
                                    }
                                    if (data == 'success') {
                                        if (editType == 'add') {
                                            // store.add(data.Data);
                                        }
                                        if (editType == 'edit') {
                                            record = form.serializeToObject();
                                            editing.saveRecord(record);
                                        }
                                        editor.accept();
                                    }
                                },
                                error: function () {
                                    BUI.Message.Alert('修改信息時發生錯誤', 'error');
                                }
                            });
                        }
                    }
                }
            }),
            gridCfg = Search.createGridCfg(columns, {
                //                tbar: {
                //                    items: [
                //                { text: '<i class="icon-plus"></i>新建', btnCls: 'button button-small', handler: function () { alert('新建'); } },
                //                { text: '<i class="icon-edit"></i>編輯', btnCls: 'button button-small', handler: function () { alert('編輯'); } },
                //                { text: '<i class="icon-remove"></i>刪除', btnCls: 'button button-small', handler: delFunction }
                //                ]
                //                },
                plugins: [editing]
            });

            var search = new Search({
                store: store,
                gridCfg: gridCfg
            }),
            grid = search.get('grid');

            function delFunction() {
                var selections = grid.getSelection();
                delItems(selections);
            }

            function delItems(items) {
                var grsbdm = [];
                BUI.each(items, function (item) {
                    grsbdm.push(item.GRSBDM);
                });
                if (grsbdm.length) {
                    BUI.Message.Confirm('確認要刪除選中的記錄麼？', function () {
                        $.ajax({
                            url: '@Url.Action("DelRY", "DAManage")' + '?grsbdm=' + grsbdm,
                            method: 'get',
                            //dataType: 'json',
                            //data: { grsbdm: grsbdm },
                            success: function (data) {
                                if (data == "success") { //刪除成功
                                    search.load();
                                } else { //刪除失敗
                                    BUI.Message.Alert('刪除失敗！');
                                }
                            }
                        });
                    }, 'question');
                }
            }

            //監聽事件，刪除一條記錄
            grid.on('cellclick', function (ev) {
                var sender = $(ev.domTarget); //點擊的Dom
                if (sender.hasClass('btn-del')) {
                    var record = ev.record;
                    delItems([record]);
                }
            });
        }); 
    </script>
    <script type="text/javascript">
        function selectDate(id) {
            var Calendar = BUI.Calendar
            var inputEl = $('#' + id),
            monthpicker = new BUI.Calendar.MonthPicker({
                trigger: inputEl,
                // month:1, //月份從0開始，11結束
                autoHide: true,
                align: {
                    points: ['bl', 'tl']
                },
                //year:2000,
                success: function () {
                    var month = this.get('month'),
                  year = this.get('year');
                    inputEl.val(year + '-' + (month + 1)); //月份從0開始，11結束
                    this.hide();
                }
            });
            monthpicker.render();
            monthpicker.on('show', function (ev) {
                var val = inputEl.val(), arr, month, year;
                if (val) {
                    arr = val.split('-'); //分割年月
                    year = parseInt(arr[0]);
                    month = parseInt(arr[1]);
                    monthpicker.set('year', year);
                    monthpicker.set('month', month - 1);
                }
            });
        }
        selectDate('gzny');
        selectDate('txny');
    </script>
</body>
</html>

CXDYController中的DACXResult方法代碼：jquery

/// <summary>
/// 檔案查詢結果
/// </summary>
/// <returns></returns>
[HttpGet]
public JsonResult DACXResult()
{
    using (dao as IDisposable)
    {
        int start = int.Parse(Request["start"] ?? "20");
        int limit = int.Parse(Request["limit"] ?? "10");
        int pageIndex = int.Parse(Request["pageIndex"] ?? "1") + 1;
        int all = 0;

        #region where條件
        string strWhere = string.Empty;
        if (!string.IsNullOrEmpty(Request["dwdm"]))
        {
            strWhere += "and dwdm = '" + Request["dwdm"] + "'";
        }
        if (!string.IsNullOrEmpty(Request["gzdw"]))
        {
            strWhere += "and gzdw = '" + Request["gzdw"] + "'";
        }
        if (!string.IsNullOrEmpty(Request["grsbdm"]))
        {
            strWhere += "and grsbdm = '" + Request["grsbdm"] + "'";
            strWhere += "and (yxbz = '0' or yxbz = '1' or yxbz = '2')";
        }
        if (!string.IsNullOrEmpty(Request["xm"]))
        {
            strWhere += "and xm = '" + Request["xm"] + "'";
            strWhere += "and (yxbz = '0' or yxbz = '1' or yxbz = '2')";
        }
        if (!string.IsNullOrEmpty(Request["sfzhm"]))
        {
            strWhere += "and sfzhm = '" + Request["sfzhm"] + "'";
        }
        if (!string.IsNullOrEmpty(Request["dah"]))
        {
            strWhere += "and dah = '" + Request["dah"] + "'";
            strWhere += "and (yxbz = '0' or yxbz = '1' or yxbz = '2')";
        }
        if (!string.IsNullOrEmpty(Request["gzny"]))
        {
            strWhere += "and gzny = '" + Request["gzny"] + "'";
        }
        if (!string.IsNullOrEmpty(Request["txny"]))
        {
            strWhere += "and txny = '" + Request["txny"] + "'";
        }
        if (string.IsNullOrEmpty(Request["grsbdm"])&& string.IsNullOrEmpty(Request["xm"])&& string.IsNullOrEmpty(Request["dah"]))
        {
            strWhere += "and yxbz = '0'";
        }
        #endregion

        string orderBy = "order by yxbz,to_number(dah) asc,gxsj desc";

        DataSet ds = dao.GetListByPage2(strWhere, orderBy, start, limit, pageIndex, out all);
        int count = ds.Tables[0].Rows.Count;
        RYXX[] ryxxs = new RYXX[count];
        for (int i = 0; i < count; i++)
        {
            RYXX ryxx = dao.DataRowToModel(ds.Tables[0].Rows[i]);
            ryxxs[i] = ryxx;
        }

        return new JsonResult()
        {
            Data = new PageData<RYXX>()
            {
                rows = ryxxs,
                results = all,
                hasError = false,
                error = ""
            },
            MaxJsonLength = int.MaxValue,
            ContentType = "application/json",
            JsonRequestBehavior = JsonRequestBehavior.AllowGet
        };
    }
}

PageData泛型類代碼（分頁對象）：程序員

public class PageData<T> where T : class
{
    public T[] rows { get; set; }
    public int results { get; set; }
    public bool hasError { get; set; }
    public string error { get; set; }
}

RYXX實體類代碼：web

/// <summary>
    /// 人員信息
    /// </summary>
    public class RYXX
    {
        /// <summary>
        /// 單位代碼
        /// </summary>
        public string DWDM { get; set; }

        /// <summary>
        /// 工做單位
        /// </summary>
        public string GZDW { get; set; }

        /// <summary>
        /// 我的社保代碼
        /// </summary>
        public string GRSBDM { get; set; }

        /// <summary>
        /// 姓名
        /// </summary>
        public string XM { get; set; }

        /// <summary>
        /// 身份證號碼
        /// </summary>
        public string SFZHM { get; set; }

        /// <summary>
        /// 工做年月
        /// </summary>
        public string GZNY { get; set; }

        /// <summary>
        /// 退休年月
        /// </summary>
        public string TXNY { get; set; }

        /// <summary>
        /// 檔案號
        /// </summary>
        public string DAH { get; set; }

        /// <summary>
        /// 退休類型
        /// </summary>
        public string TXLX { get; set; }

        /// <summary>
        /// 有效標誌（0表示正常，1表示死亡）
        /// </summary>
        public string YXBZ { get; set; }

        /// <summary>
        /// 檔案掃描人
        /// </summary>
        public string SMR { get; set; }

        /// <summary>
        /// 數據導入人
        /// </summary>
        public string DRR { get; set; }
    }

View Code

GetListByPage2分頁代碼（基於Oracle的分頁查詢）：ajax

/// <summary>
/// 分頁獲取數據
/// </summary>
/// <param name="strWhere">where條件</param>
/// <param name="orderBy">排序</param>
/// <param name="start">開始記錄的起始數，如第 20 條,從0開始</param>
/// <param name="limit">單頁多少條記錄</param>
/// <param name="pageIndex">第幾頁，同start參數重複，能夠選擇其中一個使用</param>
/// <param name="all">記錄總數</param>
/// <returns>分頁數據</returns>
public DataSet GetListByPage2(string strWhere, string orderBy, int start, int limit, int pageIndex, out int all)
{
    string sql1 = "SELECT * FROM T_RYXX where 1=1 " + strWhere + " " + orderBy;
    all = OracleHelper.Query(sql1).Tables[0].Rows.Count;

    string sql = @"SELECT * FROM (SELECT A.*, ROWNUM RN FROM (SELECT * FROM T_RYXX where 1=1" + strWhere + " " + orderBy + ") A  WHERE ROWNUM <= '" + limit * pageIndex + "') WHERE RN > '" + start + "'";
    return OracleHelper.Query(sql);
}

DAManage中的ModifyRY和DelRY方法代碼就不貼了，與上述Action中的查詢代碼思路相似（Request獲取參數，而後後端執行一下sql返回標誌，前端success回調函數處理）。經過上面的例子能夠看出，如今Web開發大部分都是js代碼，C#代碼只佔不多部分。所以熟練掌握js對於web開發來講是第一位的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。