Bootstarp简单应用

来源：互联网发布：国际网络电话机编辑：程序博客网时间：2024/06/05 07:48

一直知道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' onclick='UpdateToUse(" + value + ")'>禁用</a>";                        }else                        {                            return "<a href=/Home/EditAccount?id=" + value + ">编辑</a>   <a class='ToUse' onclick='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;};

阅读全文

0 0