这段时间研究了下bootstrap,打算从表格开始学习,实现动态绑定值,在网上找了挺多例子,但是很少有写全的,要不就太复杂,实现效果后总结一下,直接拷贝过去可以用。

第一步:先去官网上下载bootstrap的文档
      第二步:引入bootstrap之前,先需要引入jquery的文档
      第三步:引入Bootstrap所需的js

bootstrap 实现表格的动态绑定必须引入bootstrap-table的js插件,bootstrap本身是不具备这个功能的。

实现效果如图:

一、先去网上下载必要外部文件,下载之后引入当前项目。

    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<link href="../css/bootstrap-table.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/bootstrap-table.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap-table-zh-CN.js" type="text/javascript"></script>

二、定义一个table控件

   <div class="container">
<p>
<button id="button" class="btn btn-default">
Refresh from url</button></p>
<table id="table" class="table table-bordered">
</table>
</div>

三、js加载表格内容。

 <script type="text/jscript">
$(function () {
$('#table').bootstrapTable({
//请求方法
method: 'get',
//是否显示行间隔色
striped: true,
//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
cache: false,
//是否显示分页(*)
pagination: true,
//是否启用排序
sortable: false,
//排序方式
sortOrder: "asc",
//初始化加载第一页,默认第一页
//我设置了这一项,但是貌似没起作用,而且我这默认是0,- -
//pageNumber:1,
//每页的记录行数(*)
pageSize: ,
//可供选择的每页的行数(*)
pageList: [, , , ],
//这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
url: "Handler1.ashx?action=GetJson",
//默认值为 'limit',传给服务端的参数为:limit, offset, search, sort, order Else
//queryParamsType:'',
////查询参数,每次调用是会带上这个参数,可自定义
// queryParams: queryParams : function(params) {
// var subcompany = $('#subcompany option:selected').val();
// var name = $('#name').val();
// return {
// pageNumber: params.offset+1,
// pageSize: params.limit,
// companyId:subcompany,
// name:name
// };
// },
//分页方式:client客户端分页,server服务端分页(*)
sidePagination: "server",
//是否显示搜索
search: false,
//Enable the strict search.
strictSearch: true,
//Indicate which field is an identity field.
idField: "id",
columns: [{
field: 'id',
title: 'ID',
align: 'center'
}, {
field: 'name',
title: 'Item Name',
align: 'center'
}, {
field: 'active',
title: 'Item Active',
align: 'center'
}, {
field: 'user_id',
title: 'Item User_id',
align: 'center'
}, {
field: 'no_of_reports',
title: 'Item no_of_reports',
align: 'center'
}, {
field: 'id',
title: '操作',
align: 'center',
formatter: function (value, row, index) {
//通过formatter可以自定义列显示的内容
//value:当前field的值,即id
//row:当前行的数据
var a = '<a href="#" >测试</a>';
return a;
}
}],
pagination: true
});
});
</script>

四、后台生成json字符串(写的测试数据,为了方便,直接写的json串)

    public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string output = "";
string action = context.Request["action"].ToString();
switch (action)
{
case "GetJson":
output = "{\"total\":2,\"rows\":[{\"id\":\"1\",\"name\":\"name\",\"active\":\"active\",\"user_id\":\"user_id\",\"no_of_reports\":\"no_of_reports\"},{\"id\":\"2\",\"name\":\"name\",\"active\":\"active\",\"user_id\":\"user_id\",\"no_of_reports\":\"no_of_reports\"}]}";
break;
default:
break;
} context.Response.ContentType = "text/plain";
context.Response.Write(output);
}
}

C# bootstrap之表格动态绑定值的更多相关文章

  1. vue中循环时动态绑定值

    在vue项目中,有很多需要动态循环绑定的场景,在未知绑定数量的情况下只能动态生成绑定值 1.首先在data中定义一个对象,我在项目中时循环绑定下拉框,所以定义了一个selectVal = {} 2.在 ...

  2. 03.VUE学习之动态绑定值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. jquery select chosen 动态绑定值

    $("#ddlMstData").find("option[value=" + data.MstKey + "]").attr(" ...

  4. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  5. bootstrap table插件动态加载表头

    这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...

  6. Bootstrap Table表格一直加载(load)不了数据-解决办法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...

  7. BootStrap的表格加载json数据,并且可以搜索,选择

    2018.4.11日更新,8号的时候我推荐去官网下载,但是那个版本不知道为什么我无法使用 $table.bootstrapTable('getSelections'); 无论如何...然后我尝试着更换 ...

  8. react将表格动态生成视频列表【代码】【案例】

    只需要创建一个表格,id为videos,react就能将这个表格转换成视频列表,并点击自动播放 index.html <!DOCTYPE html> <html> <he ...

  9. jQuery的下面是动态表格动态表单中的HTML代码

    动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1. ...

随机推荐

  1. javascript运行机制

    太久没更新博客了,Javascript运行机制 Record it 1.代码块 JavaScript中的代码块是指由<script>标签分割的代码段.例如: <script type ...

  2. c# 备份数据库恢复数据库

    /// <summary> /// 对数据库的备份和恢复操作,Sql语句实现 /// </summary> /// <param name="cmdText&q ...

  3. Entity Framework技术导游系列 开篇 (转)

    在微软平台写程序有年头了,随着微软数据存取技术的持续演化,我在程序中先后使用过ODBC.DAO.ADO.ADO.NET.LINQ to SQL. Entity Framework这些技术. 近几年来, ...

  4. 2012杀毒软件排行榜TOP10强

    2012杀毒软件排行榜TOP10强 1:avast!杀毒软件       来自捷克的avast!,已有数十年的历史,它在国外市场一直处于领先地位.avast!分为家庭版.专业版.家庭网络特别版.和服务 ...

  5. 初步认识shell

    言语不多说,直奔主题,lz不善于写文章,只是记录自己学习过程中的点点滴滴. 注意:shell对于字母大小写比较敏感. 打开终端出现:username@hostname$或者root@hostname# ...

  6. 为IE6-7间接支持:before和:after伪类

    :before和:after我们经常会用到,特别是在做移动端页面时,利用它制作文字前后的ICON.图片的垂直居中之类的非常方便且代码简洁(当然,功能远比这些要多的多...). 可是在PC端,由于现在还 ...

  7. CII-2.4指针常量和常量指针

    #define T Stack_T typedef struct T *T; struct T { int count; struct elem { void *x; struct elem *lin ...

  8. openpose模型在AI challenge人体骨骼关键点检测的表现

    因为之前正好看了CMU在CVPR2017上的论文<Realtime Multi-Person 2D Pose Estimation using Part Affinity Fields>, ...

  9. 查看4k对齐,激活.net framework 3.5

    查看是否4k对齐 Win+R,打开运行窗口,在窗口中输入“msinfo32",组件”--“存储”--“磁盘”.然后可以在右边栏看到“分区起始偏移”,我们图例中有2个数值,分别是:32256字 ...

  10. HashMap深度解析(转载)

    原文地址:http://blog.csdn.net/ghsau/article/details/16890151 实现原理:用一个数组来存储元素,但是这个数组存储的不是基本数据类型.HashMap实现 ...