layui 使用Mvc5+Dapper 動態渲染表格(table)元件實現(查詢、新增、編輯、檢視、刪除)功能

阿新 • • 發佈：2020-08-16

前言
一、實現table動態渲染以及查詢功能。
二、實現新增功能。
三、實現檢視功能
四、實現編輯功能
五、實現刪除功能
- 1.實現刪除功能。
- 2.效果如下所示：
六、總結

前言

本章主要記錄，如何使用MVC5+Dapper動態渲染layui表格元件。就直接掠過如何建立mvc專案以及在專案中新增Dapper相關步驟。

如果對此有疑問的，請移步以下連結檢視相關操作。

.net Dapper 實踐系列(1) ---專案搭建(layui+mvc5+Dapper+MySQL)

一、實現`table`動態渲染以及查詢功能。

建立SJDA的控制器。建立列表檢視並引用layui.css和layui.js。宣告table元件。檢視完整程式碼如下所示：

<head>
    <meta name="viewport" content="width=device-width" />
    <title>司機檔案</title>
    <link href="~/Pulgs/layui/css/layui.css" rel="stylesheet" />
</head>
<body class="layui-bg-gray">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row layui-form">
                    <div class="layui-col-lg12 layui-col-md12">
                        <div class="layui-form-label">篩選條件:</div>
                        <div class="layui-input-inline">
                            <select class="layui-select" id="selectKey">
                                <option value="">請輸入篩選條件</option>
                                <option value="xxx">身份證號</option>
                                <option value="xxx">司機名稱</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="mvalue" id="selectVale"  class="layui-input" placeholder="請輸入篩選內容" />
                        </div>
                        <button class="layui-btn " id="btnQuery"><i class="layui-icon">&#xe615;</i>查詢</button>
                        <button type="reset" class="layui-btn layui-btn-primary" id="btnClear">清空</button>
                    </div>
                </div>
                <hr class="layui-bg-green">
                <div class="layui-row">
                    <div class="layui-col-lg12">
                        <button class="layui-btn layui-btn-normal" id="btnAdd"><i class="layui-icon">&#xe608;</i>新增</button>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-lg12 layui-col-md12">
                        <table id="tab" lay-filter="tab"></table>
                        <script type="text/html" id="barOp">
                            <a class="layui-btn layui-btn-primary layui-btn-xs " lay-event="query">檢視</a>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
                        </script>
                        <script type="text/html" id="indexTpl">
                            {{d.LAY_TABLE_INDEX+1}}
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--引用jquery-->
    <script src="~/Content/js/jquery-1.12.4.min.js"></script>
    <!--引用layui-->
    <script src="~/Pulgs/layui/layui.js"></script>
    <!--引用 layer-->
    <script src="~/Pulgs/layer/2.4/layer.js"></script>
    <script type="text/javascript">
        layui.use(['table', 'layer', 'form', 'laydate'], function () {
            var table = layui.table, form = layui.form, layer = layui.layer;
            /*載入資訊*/
            table.render({
                elem: '#tab',
                url: '../xxx/xxx',
                cellMinWidth: 110,
                height: 'full-130',
                size: 'sm',
                cols: [[
                    //{ type: 'checkbox' },
                    { field: '', title: '', templet: '#indexTpl', align: 'center', width: '4%'  },
                    { field: 'xxx', title: '身份證號', sort: true, width: '15%'},
                    { field: 'xxx', title: '司機名稱', sort: true },
                    { field: 'xxx', title: '性別', sort: true },
                    { field: 'xxx', title: '家庭住址', sort: true },
                    { field: 'xxx', title: '車隊名稱', sort: true },
                    { field: 'xxx', title: '手機號碼', sort: true },
                    { field: 'xxx', title: '駕駛證有效期', sort: true, width: '15%' },
                    {
                        field: 'xxx', title: '是否有效', sort: true, templet: function (d) {
                            if (d.xxx== "True") {
                                return '有效';
                            } else {
                                return '禁用';
                            }
                        }
                    },
                    { fixed: 'right', title: '操作', toolbar: '#barOp', width: "16%" }
                ]],
                page: true,
                limit: 50,
            });
            /*查詢*/
            $("#btnQuery").click(function () {
                var mKey = $("#selectKey").val();
                var mValue = $("#selectVale").val();
                table.reload('tab', {
                    url: '../xxx/xxxx',
                    page: { curr: 1 },
                    where: {
                        mKey: mKey,
                        mValue: mValue,
                    }
                });
            });
            /*新增*/
            $("#btnAdd").click(function () {
                parent.layer.open({
                    type: 2,
                    title: '新增資訊',
                    amin: 4,
                    shadeClose: true,
                    shade: 0.8,
                    area: ['53%', '60%'],
                    content: '../xxx/xxx', //iframe的url
                    end: function () { $(".layui-laypage-btn").click();//重新繫結資料，防止刷新出現閃屏效果。 }
                });
            });
            /*檢視*/
            table.on('tool(tab)', function (obj) {
                var data = obj.data;
                var mId = obj.data.xxx;
                if (obj.event == 'query') {
                    parent.layer.open({
                        type: 2,
                        title: '檢視資訊',
                        amin: 4,
                        shadeClose: true,
                        shade: 0.8,
                        area: ['53%', '60%'],
                        content: '../xxx/xxx?Id=' + mId, //iframe的url
                        end: function () { }
                    });
                }
                /*編輯*/
                else if (obj.event == 'edit') {
                    parent.layer.open({
                        type: 2,
                        title: '編輯資訊',
                        amin: 4,
                        shadeClose: true,
                        shade: 0.8,
                        area: ['53%', '60%'],
                        content: '../xxx/xxx?Id=' + mId, //iframe的url
                        end: function () { $(".layui-laypage-btn").click();//重新繫結資料，防止刷新出現閃屏效果。 }
                    });
                }
                /*刪除*/
                else if (obj.event === 'del') {
                    layer.confirm('是否確定刪除？', function (index) {
                        $.ajax({
                            url: "../xxx/xxx?Id=" + mId,
                            type: "post",
                            async: false,
                        }).success(function (msg) {
                            if (msg > 0) {
                                layer.msg('刪除成功', { icon: 1 });
                                window.setTimeout(function () {
                                    $(".layui-laypage-btn").click();//重新繫結資料，防止刷新出現閃屏效果。
                                }, 1000);

                            } else {
                                layer.msg('刪除失敗', { icon: 2 });
                                window.setTimeout(function () {
                                    $(".layui-laypage-btn").click();//重新繫結資料，防止刷新出現閃屏效果。
                                }, 1000);
                            }
                        });
                    })
                }
            });
            /*清空*/
            $("#btnClear").click(function () {
                $("#selectKey").val("");
                $("#selectVale").val("");
                form.render();
            });
        });
    </script>
</body>

1.列表資料交換層控制器。

程式碼如下所示：

//需要宣告業務層例項
SjdaDal mdal = new SjdaDal();

#region 1.列表檢視
public ActionResult Sjda()
{
   return View();
}
#endregion

#region 2.列表請求
public string SjdaList(int page, int limit,string mKey,string mValue)
{
   string mWhere = "1=1";
   if (!string.IsNullOrEmpty(mKey) && !string.IsNullOrEmpty(mValue))
        mWhere += " and " + mKey + " like '%" + mValue + "%'";
   return mdal.SjdaList(page, limit, mWhere);
}
#endregion

2.業務處理層類。

程式碼如下所示：

#region 1.列表資訊顯示
/// <summary>
/// 1.列表資訊顯示
/// </summary>
/// <param name="page">當前頁碼數</param>
/// <param name="limit">每頁記錄條數</param>
/// <returns></returns>
public string SjdaList(int page, int limit, string mWhere)
{
    try
    {
       int total;
       string mJson = string.Empty;
       string mJsons = string.Empty;
       string mfiles = "";//查詢欄位
       string mtableName = "xxx";//表名或者檢視
       string mOrderBy = "xxx ";//排序欄位
       mfiles += " xxx,xxx";
       //獲取資料，並輸出總記錄數
       var result = DappvarerDBContext.GetPageList<xxx>(mfiles, mtableName, mWhere, mOrderBy, page, limit, out total).ToList();
       //格式化日期
       IsoDateTimeConverter timeFormat = new IsoDateTimeConverter();
       timeFormat.DateTimeFormat = "yyyy-MM-dd ";
       //序列化資料
       mJson = JsonConvert.SerializeObject(result, Formatting.Indented, timeFormat);
       return mJsons = "{\"code\":0,\"msg\":\"\",\"count\":" + total + ",\"data\":" + mJson + "}";//拼接Json格式
     }
     catch (Exception)
     {
        throw;
     }
}
#endregion

3.資料訪問層處理類。

程式碼如下所示：

#region 通用分頁方法
// <summary>
/// 通用分頁方法
/// </summary>
/// <typeparam name="T">泛型集合實體類</typeparam>
/// <param name="files">列</param>
/// <param name="tableName">表</param>
/// <param name="where">條件</param>
/// <param name="orderby">排序</param>
/// <param name="pageIndex">當前頁</param>
/// <param name="pageSize">當前頁顯示條數</param>
/// <param name="total">結果集總數</param>
/// <returns></returns>
public static IEnumerable<T> GetPageList<T>(string files,string tableName,string where,string orderby,
int pageIndex,int pageSize,out int total)
{
    int skip = 1;
    if (pageIndex > 0)
    {
       skip = (pageIndex - 1) * pageSize + 1;
    }
    StringBuilder sb = new StringBuilder();
    sb.AppendFormat("SELECT COUNT(1) FROM {0} where {1};", tableName, where);
    sb.AppendFormat(@"SELECT  {0} FROM(SELECT ROW_NUMBER() OVER(ORDER BY {3}) AS RowNum,{0}  FROM {1} WHERE {2}) AS result 
    WHERE  RowNum >= {4}   AND RowNum <= {5} ORDER BY {3}", files, tableName, where, orderby, skip, pageIndex * pageSize);
    using (var conn = ConnectionFactory.SqlServerConn())
    {
        using (var reader = conn.QueryMultiple(sb.ToString()))
        {
             total = reader.ReadFirst<int>();
             return reader.Read<T>();
         }
    }
} 
#endregion

4.效果如下：

以上，即可實現動態渲染表格(table)元件並完成查詢功能。介面如下圖所示：

二、實現新增功能。

1.建立新增頁面檢視。

程式碼如下所示：

#region 1.新增檢視
public ActionResult SjdaAdd()
{
   return View();
}
#endregion

#region 2.新增操作
public int SjdaOpAdd(PE_MotorMan mJson)
{
    return mdal.SjdaOpAdd(mJson);
}
#endregion

2.新增檢視介面。

程式碼如下：

<head>
    <meta name="viewport" content="width=device-width" />
    <title>司機檔案-新增</title>
    <link href="~/Pulgs/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <fieldset class="layui-elem-field" style="width:95%;margin:10px auto;">
        <div class="layui-field-box">
            <div class="layui-form layui-form-pane" lay-filter="bindData">
                <div class="layui-form-item">
                    <div class="layui-form-label"><span style="color:red;">*</span>身份證號碼</div>
                    <div class="layui-input-block">
                        <input type="text" name="xxx" lay-verify="required" placeholder="請輸入身份證號碼" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label"><span style="color:red;">*</span>有效期</div>
                    <div class="layui-input-inline">
                        <input type="text" name="xxx" lay-verify="required" placeholder="請輸入駕駛證有效期" class="layui-input"
                           id="dDate" />
                    </div>
                    <div class="layui-form-label"><span style="color:red;">*</span>司機名稱</div>
                    <div class="layui-input-inline">
                        <input type="text" name="xxx" lay-verify="required" placeholder="請輸入司機名稱"  class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <div class="layui-form-label">性別</div>
                    <div class="layui-input-block">
                        <input type="radio" name="xxx" value="男" title="男" checked="">
                        <input type="radio" name="xxx" value="女" title="女">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">家庭地址</div>
                    <div class="layui-input-block">
                        <input type="text" name="xxx" placeholder="請輸入地址" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">手機號碼</div>
                    <div class="layui-input-inline">
                        <input type="text" name="xxx" placeholder="請選擇手機號碼" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-form-label">車隊</div>
                    <div class="layui-input-inline">
                        <input type="text" name="xxx" placeholder="請輸入車隊" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <div class="layui-form-label">是否有效</div>
                    <div class="layui-input-block">
                        <input type="radio" name="xxx" value="true" title="有效" checked="">
                        <input type="radio" name="xxx" value="false" title="無效">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div style="text-align: center;">
                        <button class="layui-btn" lay-submit lay-filter="btnSave">儲存</button>
                        <button class="layui-btn layui-btn-primary" id="btnCancel">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <!--引用jquery-->
    <script src="~/Content/js/jquery-1.12.4.min.js"></script>
    <!--引用layui-->
    <script src="~/Pulgs/layui/layui.js"></script>
    <script src="~/Moduls/myCommon.js"></script>
    <script type="text/javascript">
        var uName = "@(Session["uName"])";
        if (uName == "" || uName == null || uName == undefined) {
            jump("../Login/Login");
        }
        else {
            layui.use(['form', 'layer', 'laydate'], function () {
                var form = layui.form, layer = layui.layer, laydate = layui.laydate;
                form.render();
                laydate.render({ elem: "#dDate", type: "date"});
                /*儲存*/
                form.on('submit(btnSave)', function (data) {
                    $.ajax({
                        url: "../xxx/xxxx",
                        type: "post",
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify(data.field)
                    }).done(function (msg) {
                        if (msg == 1) {
                            layer.msg("新增成功", { icon: 1 });
                            window.setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            }, 1000);
                        }
                        else if (msg == 2) { layer.msg("身份證號已存在,不可重複新增。", { icon: 7 }); return; }
                        else { layer.msg("新增失敗", { icon: 2 }); return; }
                    }).fail(function (e) { });
                    return false;
                });
                /*取消*/
                $("#btnCancel").click(function () {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                });
            });
        }
    </script>
</body>

3.實現新增方法。

程式碼如下：

#region 實現新增方法
/// <summary>
/// 實現新增方法
/// </summary>
/// <param name="mJson"></param>
/// <returns></returns>
public int SjdaOpAdd(xxxx mJson)
 {
      try
      {
         int mresult = 0;
         int mIsMomNO = IsMomNO(mJson.xxxx);//新增前判斷是否有同樣的身份證號 0無 1有
         if (mIsMomNO == 0)
         {
            xxx m = new xxx();//例項化物件
            m.xxx= mJson.xxx; //取值1
            m.xxx= mJson.xxx; //取值2
            
            //拼接sql語句
            string mSql = "insert into xxx";
            mSql += "(xxx,xxx) ";
            mSql += "values (@xxx,@xxx)";
            //執行新增操作
            int result=DapperDBContext.Execute(mSql, m);
            //返回結果集
            if (result > 0) { mresult = 1; }
          }
          else { mresult = 2; }
          
          return mresult;
    }
    catch (Exception)
    {
       throw;
    }
}
public int IsMomNO(string xxx)
{
   string mSql = "";
   int mResult = 0;
   DynamicParameters p = new DynamicParameters();
   mSql += "select count(xxx) from xxx where xxx=@ID";
   p.Add("@ID", xxx);
   var result = Convert.ToInt32(DapperDBContext.ExecuteScalar(mSql, p));
   if (result > 0) { mResult = 1; }
   return mResult;
}
#endregion

4.效果如下：

三、實現檢視功能

1.建立檢視檢視頁面

程式碼如下所示：

#region 檢視檢視
public ActionResult SjdaLook(string Id)
{
    ViewBag.Id = Id;
    return View();
}
#endregion

2.檢視頁面檢視。

程式碼如下所示：

<head>
    <meta name="viewport" content="width=device-width" />
    <title>司機檔案-檢視</title>
    <link href="~/Pulgs/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <fieldset class="layui-elem-field" style="width:95%;margin:10px auto;">
        <div class="layui-field-box">
            <div class="layui-form layui-form-pane" lay-filter="bindData">
                <div class="layui-form-item">
                    <div class="layui-form-label"><span style="color:red;">*</span>身份證號碼</div>
                    <div class="layui-input-block">
                        <input type="text" name="xxx" lay-verify="required" placeholder="請輸入身份證號碼" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label"><span style="color:red;">*</span>駕駛證有效期</div>
                    <div class="layui-input-inline">
                        <input type="text" name="xxx" lay-verify="required" placeholder="請輸入駕駛證有效期"  class="layui-input"
                         id="dDate" />
                    </div>
                    <div class="layui-form-label"><span style="color:red;">*</span>司機名稱</div>
                    <div class="layui-input-inline">
                        <input type="text" name="xxx" lay-verify="required" placeholder="請輸入司機名稱"  class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <div class="layui-form-label">性別</div>
                    <div class="layui-input-block">
                        <input type="radio" name="xxx" value="男" title="男" checked="">
                        <input type="radio" name="xxx" value="女" title="女">
                    </div>
                </div>
                <div class="layui-form-item" style="width:80%;">
                    <div class="layui-form-label">家庭地址</div>
                    <div class="layui-input-block" style="width: 100%;">
                        <input type="text" name="xx" placeholder="請輸入家庭地址" autocomplete="off" class="layui-input"  />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">手機號碼</div>
                    <div class="layui-input-inline">
                        <input type="text" name="xxx" placeholder="請選擇手機號碼" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-form-label">車隊</div>
                    <div class="layui-input-inline">
                        <input type="text" name="xxx" placeholder="請輸入車隊" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <div class="layui-form-label">是否有效</div>
                    <div class="layui-input-block">
                        <input type="radio" name="xxx" value="true" title="有效" checked="">
                        <input type="radio" name="xxx" value="false" title="無效">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div style="text-align: center;">
                        <button class="layui-btn layui-btn-primary" id="btnCancel">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <!--引用jquery-->
    <script src="~/Content/js/jquery-1.12.4.min.js"></script>
    <!--引用layui-->
    <script src="~/Pulgs/layui/layui.js"></script>
    <script src="~/Moduls/myCommon.js"></script>
    <script type="text/javascript">
        var uName = "@(Session["uName"])";
        var Id = "@ViewBag.Id";
        if (uName == "" || uName == null || uName == undefined) {
            jump("../Login/Login");
        }
        else {
            layui.use(['form', 'layer', 'laydate'], function () {
                var form = layui.form, layer = layui.layer, laydate = layui.laydate;
                form.render();
                laydate.render({ elem: "#dDate", type: "date", value: new Date() });
                /*查詢*/
                $.get("../xxx/xxx?ID=" + Id, function (msg) {
                    var mJSON = $.parseJSON(msg);
                    if (msg != "") {
                        form.val('bindData', {
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": "" + mJSON.xxx+ ""
                        });
                    }
                });
                /*取消*/
                $("#btnCancel").click(function () {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                });
            });
        }
    </script>
</body>

3.檢視檢視實現。

程式碼如下所示：

#region 根據ID查詢
/// <summary>
/// 根據ID查詢
/// </summary>
/// <returns></returns>
public string SjdaLookById(string Id)
{
   try
   {
       DynamicParameters p = new DynamicParameters();
       string msql = "select * from xxx where xxx=@Id";
       p.Add("@Id", Id);
       IsoDateTimeConverter timeFormat = new IsoDateTimeConverter();
       timeFormat.DateTimeFormat = "yyyy-MM-dd";
       var result = DapperDBContext.Query<xxx>(msql, p).FirstOrDefault();
       return JsonConvert.SerializeObject(result, Formatting.Indented, timeFormat);
     }
     catch (Exception)
     {
        throw;
     }
 }
#endregion

4.效果如下圖所示：

四、實現編輯功能

1.建立編輯檢視頁面

程式碼如下所示：

#region 編輯檢視
public ActionResult SjdaEdit(string Id)
{
    ViewBag.Id = Id;
    return View();
}
#endregion

#region 編輯操作
public int SjdaOpEdit(xxx mJson)
{
   return mdal.SjdaOpEdit(mJson);
}
#endregion

2.編輯頁面檢視。

程式碼如下所示：

<head>
    <meta name="viewport" content="width=device-width" />
    <title>司機檔案-檢視</title>
    <link href="~/Pulgs/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <fieldset class="layui-elem-field" style="width:95%;margin:10px auto;">
        <div class="layui-field-box">
            <div class="layui-form layui-form-pane" lay-filter="bindData">
                <div class="layui-form-item">
                    <div class="layui-form-label"><span style="color:red;">*</span>身份證號碼</div>
                    <div class="layui-input-block">
                        <input type="text" name="xxx" lay-verify="required" placeholder="請輸入身份證號碼" autocomplete="off" 
                         class="layui-input" disabled="disabled" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label"><span style="color:red;">*</span>駕駛證有效期</div>
                    <div class="layui-input-inline">
                        <input type="text" name="xxx" lay-verify="required" placeholder="請輸入駕駛證有效期" autocomplete="off" 
                        class="layui-input" id="dDate" />
                    </div>
                    <div class="layui-form-label"><span style="color:red;">*</span>司機名稱</div>
                    <div class="layui-input-inline">
                        <input type="text" name="xxxx" lay-verify="required" placeholder="請輸入司機名稱" autocomplete="off" 
                        class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <div class="layui-form-label">性別</div>
                    <div class="layui-input-block">
                        <input type="radio" name="xxx" value="男" title="男" checked>
                        <input type="radio" name="xxxx" value="女" title="女">
                    </div>
                </div>
                <div class="layui-form-item" style="width:80%;">
                    <div class="layui-form-label">家庭地址</div>
                    <div class="layui-input-block" style="width: 100%;">
                        <input type="text" name="xxx" placeholder="請輸入家庭地址" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">手機號碼</div>
                    <div class="layui-input-inline">
                        <input type="text" name="xxx" placeholder="請選擇手機號碼" autocomplete="off" class="layui-input" />
                    </div>
                    <div class="layui-form-label">車隊</div>
                    <div class="layui-input-inline">
                        <input type="text" name="xxx" placeholder="請輸入車隊" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <div class="layui-form-label">是否有效</div>
                    <div class="layui-input-block">
                        <input type="radio" name="xxx" value="true" title="有效" checked>
                        <input type="radio" name="xxx" value="false" title="無效">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div style="text-align: center;">
                        <button class="layui-btn" lay-submit lay-filter="btnSave">儲存</button>
                        <button class="layui-btn layui-btn-primary" id="btnCancel">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
    <!--引用jquery-->
    <script src="~/Content/js/jquery-1.12.4.min.js"></script>
    <!--引用layui-->
    <script src="~/Pulgs/layui/layui.js"></script>
    <script src="~/Moduls/myCommon.js"></script>
    <script type="text/javascript">
        var uName = "@(Session["uName"])";
        var Id = "@ViewBag.Id";
        if (uName == "" || uName == null || uName == undefined) {
            jump("../Login/Login");
        }
        else {
            layui.use(['form', 'layer', 'laydate'], function () {
                var form = layui.form, layer = layui.layer, laydate = layui.laydate;
                form.render();
                laydate.render({ elem: "#dDate", type: "date", value: new Date() });
                /*查詢*/
                $.get("../Sjda/SjdaLookById?ID=" + Id, function (msg) {
                    var mJSON = $.parseJSON(msg);
                    if (msg != "") {
                        form.val('bindData', {
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": mJSON.xxx,
                            "xxx": "" + mJSON.xxx+ ""
                        });
                    }
                });
                /*儲存*/
                form.on('submit(btnSave)', function (data) {
                    $.ajax({
                        url: "../Sjda/SjdaOpEdit",
                        type: "post",
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify(data.field)
                    }).done(function (msg) {
                        if (msg == 1) {
                            layer.msg("編輯成功", { icon: 1 });
                            window.setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            }, 1000);
                        }
                        else { layer.msg("編輯失敗", { icon: 2 }); return; }
                    }).fail(function (e) { });
                    return false;
                });
                /*取消*/
                $("#btnCancel").click(function () {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                });
            });
        }
    </script>
</body>

3.編輯功能實現。

程式碼如下所示：

#region 編輯
/// <summary>
/// 編輯
/// </summary>
/// <param name="mJson"></param>
/// <returns></returns>
public int SjdaOpEdit(xxx mJson)
{
   try
   {
      xxx m = new xxx();
      m.xx= mJson.xxx;
      m.xx= mJson.xxx;
      m.xx= mJson.xxx;


      string mSql = "update xxx set xx=@xxx,xx=@xxx,xx=@xxx";
      mSql += " where xx=@xxx";
      int result = DapperDBContext.Execute(mSql, m);
      return result;
    }
    catch (Exception)
    {
       throw;
    }
}
#endregion

4.效果如下圖所示：

五、實現刪除功能

1.實現刪除功能。

在控制器中程式碼如下所示：

#region 5.刪除
public int SjdaOpDel(string Id)
{
   return mdal.SjdaOpDel(Id);
}
#endregion

在業務層程式碼如下所示：

#region 刪除
/// <summary>
/// 刪除
/// </summary>
/// <param name="Id"></param>
/// <returns></returns>
public int SjdaOpDel(string id)
{
   try
   {
      DynamicParameters p = new DynamicParameters();
      string mSql = "delete from xxx where xxx=@Id";
      p.Add("@Id", id);
      return DapperDBContext.Execute(mSql, p);
    }
    catch (Exception)
    {
       throw;
    }
}
#endregion

2.效果如下所示：

六、總結

至此，基本實現了資料基本的操作。如有不明白之處或者有更好的實現方式，歡迎大家指出。有則改之無則加勉。

你知道的越多，你不知道的閱讀。我們不生產知識，我們只是知識的搬運工。

layui 使用Mvc5+Dapper 動態渲染表格(table)元件實現(查詢、新增、編輯、檢視、刪除)功能

目錄前言一、實現table動態渲染以及查詢功能。1.列表資料交換層控制器。2.業務處理層類。3.資料訪問層處理類。4.效果如下：二、實現新增功能。1.建立新增頁面檢視。2.新增檢視介面。3.實現新增方法。4.效果如下：三、

layui動態渲染select等元件並初始化賦值失敗

描訴：有一個使用者資訊form表單，其中有部門單選框，資料庫中有一張dept（部門）表，要動態渲染出所有部門，並預設選中使用者所在部門

封裝react antd的表格table元件

封裝元件是為了能在開發過程中高度複用功能和樣式相似的元件，以便我們只關注於業務邏輯層的處理，提高開發效率，提高逼格，降低程式碼重複率，降低勞動時間，減少加班的可能。

完整的Vue+element-ui table元件實現表格內容的編輯刪除和新行新增小例項

copy 文件https://www.cnblogs.com/CodeTheUniverse/p/13213088.html 先上一張頁面展示圖，畫面很簡單（當然這個功能也很簡單，不過筆者剛接觸Vue，為了避免以後出現相同需求再重寫，所以記錄一下）

layui 分頁 + vue渲染表格（html）（layui已於2021-10-13下線）

layui 分頁vue渲染表格：步驟： 1、初始化獲取表格列表資料，預設顯示第一頁資料列表；

ant design的table元件實現全選功能以及自定義分頁

我就廢話不多說了，大家還是直接看程式碼吧~ ant design的table元件實現全選功能以及自定義分頁

elementUI的table元件實現全選功能

技術標籤：jselementUI筆記需求：最近碰見一個需求，有三萬多條資料,使用者點選全選按鈕，要將三萬條資料全部選中。 template

解決vue element-UI el-table元件實現翻頁多選之後，table資料改變之前的選擇不清空的問題

技術標籤：VueJavaScriptelement-ui element-ui文件已經說得很清楚，要實現翻頁勾選，就要犧牲掉"資料改變選項清空的優點"

antd vue table元件實現分頁效果

1、<a-table></a-table>標籤中新增屬性 :pagination=\"pagination\" 2、data中設定pagination

圖書管理系統---基於form元件和modelform改造新增和編輯

新增基於form元件改造步驟1 1.為了區分自己寫的form類和檢視邏輯，所以工作中需要區分開來，那麼就可以在應用下建立一個叫utils的資料夾，專門存放我們寫的form類,py檔名隨便起

解決elementUi中的table元件篩選表格預設篩選filtered-value沒效果，表格資料渲染不出來的問題

技術標籤：element-uiJavaScriptVue 專案中遇到一個問題想要的效果如下：但是實際進入該頁面的時候必須重新整理一下才會顯示預設篩選的效果和資料，遇到的問題如下：

基於iview的table元件render函式功能動態渲染雙向繫結的選擇下拉框

iview table元件的render函式功能是封裝vue的純函式元件得到的所以用法和vue render函式基本但入參稍有不同

vue+Element UI table表格動態渲染(包括操作按鈕列)、按鈕動態繫結點選事件

技術標籤：vueElement UI - tablevueelementui 涉及內容： Element UI的使用；vue如何動態迴圈渲染Element UI中table內容；Element UI中table最後一列為操作按鈕，如何動態渲染並繫結點選事件。

改造 layui 表格元件實現多重排序

　　layui的表格元件目前只支援單列排序，在實際應用中並不能很好的支撐我們的業務需求。今天一時手癢，決定改造一番以支援多重排序。

vue內建元件component--通過is屬性動態渲染元件操作

我就廢話不多說了，大家看程式碼吧~ <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\">

ElementUI中的el-table怎樣實現每一列顯示的是控制元件並能動態實現雙向資料繫結

場景要實現在ElementUI的表格中每一列展示的不是資料而是控制元件。效果如下

Element UI使用表格動態渲染資料

json資料多層巢狀如何實現渲染例如：我們表頭需要第一層的datetime和data下面的屬性

LayUIi- 動態表格table中下拉框Select的設定和監聽

LayUi中動態表格中可以使用 templet自定義列模板對單元格新增其他元素，新增下拉框相對麻煩些，沒有自帶的。

00029-layui 表格table 操作列支援下拉按鈕(選單)，多級下拉按鈕(選單)，dropdown

用到dropdown 控制元件：地址： http://test.microanswer.cn/page/dropdown.html 引入css,js: <link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/dropdown.css" media="all&

Vue切換Tab動態渲染元件的操作

使用<component :is=\"元件名\"></component> 結合Element-UI的導航選單 : UI元件 el-menu-item裡的index寫對應的元件名

layui 使用Mvc5+Dapper 動態渲染表格(table)元件 實現(查詢、新增、編輯、檢視、刪除)功能

前言

一、實現table動態渲染以及查詢功能。

1.列表資料交換層控制器。

2.業務處理層類。

3.資料訪問層處理類。

4.效果如下：

二、實現新增功能。

1.建立新增頁面檢視。

2.新增檢視介面。

3.實現新增方法。

4.效果如下：

三、實現檢視功能

1.建立檢視檢視頁面

2.檢視頁面檢視。

3.檢視檢視實現。

4.效果如下圖所示：

四、實現編輯功能

1.建立編輯檢視頁面

2.編輯頁面檢視。

3.編輯功能實現。

4.效果如下圖所示：

五、實現刪除功能

1.實現刪除功能。

2.效果如下所示：

六、總結

相關推薦

layui 使用Mvc5+Dapper 動態渲染表格(table)元件實現(查詢、新增、編輯、檢視、刪除)功能

一、實現`table`動態渲染以及查詢功能。