Bootstarp简单应用

一直知道bootstarp功能很全面，然而从小白到小白的道路上一直没有整理过常用的信息，目前有一个简单的web需求，就简单整理下bootstarp的功能。高手可以走了，小白的简介也许只适合小白，写的不全请见谅哈。

提供一点bootstarp的资源吧，需要的可以自行下载吧
http://download.csdn.net/detail/fuzhenglai/9888109

首先说到MVC框架；Model，View，Controller，这个就不介绍了哈。用了bootstarp 你会发现构建web也没想象中的困难，现在做一个demo吧！

先看Controller：然而一个简单的示例，方便小白受点启发吧。

   public ActionResult ManagerAccount()
        {  
            return View();//直接返回某个网页
        }

然而并没有任何东西;

       public JsonResult GetAccountDataGirdSource(SearchCompanyModel model)//model中包涵查询的信息
        {                 
            var cis = CmpayInfosDAL.cid.GetPageList(model.PageNum, model.PageSize, () =>
            {
                var sql = new PetaPoco.Sql();
                sql.Append("AddUser=@0", checkresult.DataView.Account);
                if (!string.IsNullOrEmpty(model.AccountName))
                    sql.Append($"and userName like '%{model.AccountName}%'");
                if (model.StartTime > DateTime.Now.AddYears(-10))
                    sql.Append("and AddTime>@0", model.StartTime);
                if (model.EndTime > DateTime.Now.AddYears(-10))
                    sql.Append("and AddTime<@0", model.EndTime);
                return sql;
            });//这里就是你的数据源了,当日我这么写很low，哈哈凑合看吧
            var list = cis.Items;
            var total = CmpayInfosDAL.cid.GetAllLst(() =>
            {
                var sql = new PetaPoco.Sql();
                sql.Append("AddUser=@0", checkresult.DataView.Account);
                if (!string.IsNullOrEmpty(model.AccountName))
                    sql.Append($"and userName like '%{model.AccountName}%'");
                if (model.StartTime > DateTime.Now.AddYears(-10))
                    sql.Append("and AddTime>@0", model.StartTime);
                if (model.EndTime > DateTime.Now.AddYears(-10))
                    sql.Append("and AddTime<@0", model.EndTime);
                return sql;
            }).Count;//这个就是所有的数据条数。
            return Json(new { total = total, rows = list }, JsonRequestBehavior.AllowGet);//return的json是你使用bootstarp支持的返回json
        }






model我就忽略过了哈
下面来一下view：
@using xxxx
@model xxxx
@{
    ViewBag.Title = "查看账户";
    Layout = "~/Views/Shared/_head.cshtml";
}
<script src="~/Scripts/View/Account.js"></script>
<h2>@ViewBag.Title.</h2>
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <div class="col-md-12">
                    <div class="form-group">
                        @Html.LabelFor(m => m.AccountName, new {@class = "col-md-1 control-label"})
                        <div class="col-md-2">
                            @Html.TextBoxFor(m => m.AccountName, new {@class = "form-control"})
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="Starttime" class="col-md-1 control-label">开始时间</label>
                        <div class="input-group date form_datetime col-md-3" data-date="2017-06-16T05:25:07Z" data-date-format="yyyy-MM-dd HH:mm:ss" data-link-field="Starttime">
                            <input class="form-control" size="16" type="text" value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                        </div>
                        <input type="hidden" id="Starttime" value=""/>
                    </div>
                    <div class="form-group">
                        <label for="EndTime" class="col-md-1 control-label">截止时间</label>
                        <div class="input-group date form_datetime col-md-3" data-date="2017-06-16T05:25:07Z" data-date-format="yyyy-MM-dd HH:mm:ss" data-link-field="EndTime">
                            <input class="form-control" size="16" type="text" value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                        </div>
                        <input type="hidden" id="EndTime" value=""/>
                    </div>
                    <div class="form-group">
                        <div class="col-md-1">
                            <button type="button" id="btn_query" class="btn btn-primary">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><br />
<div id="toolbar">
    <select class="form-control">
        <option value="">Export Basic</option>
        <option value="all">Export All</option>
        <option value="selected">Export Selected</option>
    </select>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="col-md-1">
        </div>
        <div class="col-md-10">
            <table class="bordered" id="accountinfo">//这里设置的table什么也没有，只需要一个id，bootstarp就会自动装载table
            </table>
        </div>
        <!--分页按钮-->
        <div class="col-md-1">
        </div>
    </div>
   
</div>
<script>
    $("#btn_query").click(function () {
        $("#accountinfo").bootstrapTable('refresh');//这里是刷新table的地方，
    });
</script>  




好了来看下boot的加载吧：


$(function () {
    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();
});
var TableInit = function () {
    var oTableInit = new Object();
    var useinfo = 0;
    //初始化Table
    oTableInit.Init = function () {
        $('#accountinfo').bootstrapTable({
            url: '/Home/GetAccountDataGirdSource',
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            showExport: true,                     //是否显示导出
            exportDataType: "basic",              //basic', 'all', 'se
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'userName',
                    title: '账户名称'
                },
                {
                    field: 'balance',
                    title: '余额'
                },
                {
                    field: 'Money',
                    title: '面值'
                },
                {
                    field: 'status',
                    title: '状态',
                    formatter: function (value, row, index) {//对于一些需要特殊加载的字段，就需要自己去写加载方式了
                        var orderstate = "";
                        if (value == 1) {
                            Tag = "已启用";
                            useinfo = 1;
                        } else {
                            useinfo = 0;
                            Tag = "已禁用";
                        }
                        return Tag;
                    }
                },
                {
                    field: 'useTime',
                    title: '使用时间',
                    formatter: function (value, row, index) {                     
                        return cTime(value);
                    }
                },
                {
                    field: 'AddTime',
                    title: '添加时间',
                    formatter: function (value, row, index) {
                        return cTime(value);
                    }
                },
                {
                    field: 'id',
                    title: '操作',
                    formatter: function (value, row, index) {
                        var str = "";
                        if (useinfo==1) {
                            return "<a href=/Home/EditAccount?id=" + value + ">编辑</a>   <a class='ToUse' οnclick='UpdateToUse(" + value + ")'>禁用</a>";
                        }else
                        {
                            return "<a href=/Home/EditAccount?id=" + value + ">编辑</a>   <a class='ToUse' οnclick='UpdateToUse(" + value + ")'>启用</a>";
                        }
                    }
                }
            ]
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            PageSize: params.limit,   //页面大小
            PageNum: params.offset,  //页码
            StartTime: $("#Starttime").val(),
            EndTime: $("#EndTime").val(),
            AccountName: $("#AccountName").val()
        };
        return temp;
    };
    return oTableInit;
};