.Net MVC+bootstrap Table學習

1、效果展現

2、使用方法

1）、相關css和js的引用

<link href="~/Themes/Bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="~/Themes/Bootstrap/css/bootstrap-table.css" rel="stylesheet" />
    <!---------------------------js引用------------------------------------------->
    <script src="~/Themes/Bootstrap/js/jquery.min.js"></script>
    <script src="~/Themes/Bootstrap/js/bootstrap.js"></script>
    <script src="~/Themes/Bootstrap/js/bootstrap-table.js"></script>
    <script src="~/Themes/Bootstrap/js/bootstrap-table-zh-CN.js"></script>
    <script src="~/Themes/layer/layer.js"></script>

2）、頁面html

        <button type="button" id="btnAdd" class="btn btn-primary">添加新紀錄</button>
        <div class="pull-right search" style="width:260px;">
            <input class="form-control" type="text" id="txtName" placeholder="請輸入姓名" style="float:left;width:150px;">
            <button type="button" id="btnSearch" class="btn btn-primary">查詢</button>
        </div>
        <table id="myTable"></table>

3）、初始化表格js和相應的增、刪、改、查js事件

        <script type="text/javascript">
            var $table = $("#myTable");
            var TableInit = function () {
                var oTable = new Object();
                oTable.QueryUrl = '@Url.Content("~/Home/GetList")' + '?rnd=' + +Math.random();
                oTable.Init = function () {
                    $table.bootstrapTable({
                        method: 'post',//數據請求方式
                        url: oTable.QueryUrl,//請求數據的地址
                        height: $(window).height() - 100,
                        striped: true,
                        pagination: true,
                        pageNumber: 1,
                        pageSize: 10,
                        pageList: [5, 10, 15],
                        uniqueId: "ID",
                        sidePagination: "server", //服務端請求
                        queryParams: oTable.queryParams,
                        queryParamsType: "",
　　　　　　　　　　　　　　 sortOrder: "desc",//默認排序方式，降序排列
                        columns: [{
                            field: 'ID',
                            title: 'ID',
                            width: 100,
                            align: 'center',
                            valign: 'middle',
                            sortable: true,
　　　　　　　　　　　　　　　　　sortname:'ID',//排序字段名稱
                            formatter: idFormatter
                        }, {
                            field: 'Name',
                            title: '姓名',
                            width: 100,
                            align: 'center',
                            valign: 'middle',
                            formatter: nameFormatter
                        }, {
                            field: 'operate',
                            title: '操做',
                            width: 100,
                            align: 'center',
                            valign: 'middle',
                            formatter: operateFormatter,
                            events: operateEvents
                        }],
                        onLoadSuccess: function () {
                        },
                        onLoadError: function () {
                        }
                    });
                }
                oTable.queryParams = function (params) {
                    var temp = {
                        pageSize: params.pageSize,
                        pageIndex: params.pageNumber,
                        name: $("#txtName").val(),
                        sortOrder: params.sortOrder,
　　　　　　　　　　　　　　 sortName:params.sortName
                    };
                    return temp;
                }
                function idFormatter(value, row, index) {
                    return row.ID;
                }
                function nameFormatter(value, row, index) {
                    return row.Name;
                }
                function operateFormatter(value, row, index) {
                    return '<a class="edit" style="cursor:pointer;" title="修改">修改</a> ' + '<a class="delete" style="cursor:pointer;" title="刪除">刪除</a>';
                }
                window.operateEvents = {
                    'click .edit': function (e, value, row, index) {
                        //修改操做,將姓名字段改成「小寶，英文名：aspen」
                        $.ajax({
                            url: '@Url.Content("~/Home/UpdateRow")',
                            data: { id: row.ID },
                            success: function (result) {
                                if (result.state) {
                                    layer.msg('修改爲功', { tiem: 500, icon: 1 });
                                    $table.bootstrapTable('refresh');
                                }
                            }
                        });
                        $table.bootstrapTable('refresh');
                    },
                    'click .delete': function (e, value, row, index) {
                        //刪除操做
                        layer.confirm('您肯定要刪除該記錄嗎？', {
                            btn: ['肯定', '取消'] //按鈕
                        }, function () {
                            $.ajax({
                                url: '@Url.Content("~/Home/DeleteRow")',
                                data: { id: row.ID },
                                success: function (result) {
                                    if (result.state) {
                                        layer.msg('刪除成功', { tiem: 500, icon: 1 });
                                        $table.bootstrapTable('refresh');
                                    }
                                }
                            });

                        }, function () {

                        });
                    }
                }
                return oTable;
            }

            //初始化表格
            $(function () {
                var myTable = new TableInit();
                myTable.Init();
            });
            //查詢
            $("#btnSearch").click(function () {
                $table.bootstrapTable('destroy');
                var myTable = new TableInit();
                myTable.Init();
            });
            //添加
            $("#btnAdd").click(function () {
                $.ajax({
                    url: '@Url.Content("~/Home/AddRow")',
                    success: function (result) {
                        if (result.state) {
                            layer.msg('添加成功', { tiem: 500, icon: 1 });
                            $table.bootstrapTable('refresh');
                        }
                    }
                });
            });
        </script>

4）、控制器方法

     public class HomeController : Controller
    {
        static List<Person> personList = new List<Person>();
        static HomeController()
        {
            for (int i = 1; i <= 100; i++)
            {
                Person person = new Person();
                person.ID = i;
                person.Name = "小寶" + i.ToString();
                personList.Add(person);
            }
        }
        public ActionResult List()
        {
            return View();
        }
        public ActionResult GetList(string name,string sortOrder="desc",string sortName = "ID",int pageIndex = 1, int pageSize = 10)
        {
            var tempPersonList = personList;
            if (sortOrder == "desc"&&sortName=="ID")
            {
                tempPersonList = tempPersonList.OrderByDescending(p => p.ID).ToList();
            }
            else
            {
                tempPersonList = tempPersonList.OrderBy(p => p.ID).ToList();
            }
            if (!string.IsNullOrWhiteSpace(name))
            {
                tempPersonList = tempPersonList.Where(p => p.Name.Contains(name)).ToList();
            }
            var currentPersonList = tempPersonList
                                              .Skip((pageIndex - 1) * pageSize)
                                              .Take(pageSize);

            var total = tempPersonList.Count();
            var rows = currentPersonList.Select(p => new { ID=p.ID,Name=p.Name});
            return Json(new { total=total,rows=rows, state = true, msg = "加載成功" }, JsonRequestBehavior.AllowGet);
        }
        public ActionResult UpdateRow(int id)
        {
            Person person = personList.Find(p => p.ID == id);
            person.Name = person.Name + ",英文名:aspen";
            int index= personList.FindIndex(p => p.ID == id);
            personList.Remove(person);
            personList.Insert(index, person);
            return Json(new { state = true, msg = "修改爲功" }, JsonRequestBehavior.AllowGet);
        }
        public ActionResult DeleteRow(int id)
        {
            Person person = personList.Find(p => p.ID == id);
            personList.Remove(person);
            return Json(new { state = true, msg = "刪除成功" }, JsonRequestBehavior.AllowGet);
        }
        public ActionResult AddRow()
        {
           int maxIndex= personList.Max(p => p.ID);
           Person person = new Person();
           person.ID = maxIndex + 1;
           person.Name = "小寶" + person.ID.ToString();
           personList.Add(person);
            return Json(new { state = true, msg = "添加成功" }, JsonRequestBehavior.AllowGet);
        }
    }
    class Person
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }

項目源碼下載：

http://files.cnblogs.com/files/weishuanbao/BootstrapTable.rar

參考資料：

1.Bootstrap Table API:

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

2.網友分享：

http://www.imooc.com/article/8917