码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap table

时间:2017-04-12 15:11:51      阅读:318      评论:0      收藏:0      [点我收藏+]

标签:事件   ref   info   else   fine   json   中文支持   中文   function   

  $(‘#tbGrid‘).bootstrapTable({
                     url: "../Service/CIICService.asmx/getp",//请求的地址
                     method: "post",//请求方式
                     dataType: "json",//返回数据类型
                     //data:JSON.stringify({name:$("#txt").val()}),
                     sidePagination: "client",//设置在哪里分页
                     pageNumber: 1,//页码
                     cache: false,
                     pageSize: 10,//页大小
                     pageList: [10, 20, 50, 100, 500],//可选页大小
                     height: 750,//高度
                     pagination: true,//是否显示分页信息
                     undefinedText: "未查询到数据",//未查询到数据时显示的文字
                     striped: true,//是否隔行变色
                     sortName: "GRGH",//定义排序列
                     sortOrder: "DESC",//定义排序方式
                     idField: "GRBH",//指定主键列
                     clickToSelect: true,//点击行时,自动选择单选或复选框
                     showToggle: false,//显示切换视图(table/card)按钮
                     showRefresh: false,//显示刷新按钮
                     showColumns: false,//显示列下拉框
                     contentType: "application/json",
                     dataType: "json",//服务器返回的数据类型
                     maintainSelected: true,//点分页按钮时记住选择项
                     search: false,//开启搜索框
                     showHeader: true,
                     searchAlign: "left",//搜索框位置
                     buttonsAlign: "right",//按钮位置
                     queryParamsType: ‘t‘,
                     toolbar: "#dv-bar",
                     //cardView:true,
                     queryParams: function (params) {
                         //return { eid: parseInt(id), searchText: "", pageSize: params.pageSize, pageNumber: params.pageNumber, sortName: params.sortName, sortOrder: params.sortOrder }
                         return { name: $("#txt").val(), tname: companyName }
                     },
                     locale: "zh-CN",//中文支持
                     onClickRow: function (row, $ele) {
                         $(‘.info‘).removeClass(‘info‘);
                         $($ele).addClass(‘info‘);
                     },
                     //rowStyle: function (row, index) {
                     //    return { classes: ‘active‘ };
                     //},
                     onRefresh: function () {

                     },//刷新按钮点击事件
                     onLoadSuccess: function (data) {

                         $(‘#tbGrid‘).bootstrapTable(‘load‘, JSON.parse(data.d)[0]);
                     },//加载数据成功
                     onLoadError: function (status) {

                         return "加载数据时发生异常,请联系管理员......";
                     },//加载数据异常
                     //onPageChange: function (number, size) {

                     //},//点击分页按钮事件
                     columns: [
                         { field: ‘‘, title: ‘‘, checkbox: true, titleTooltip: "全选" },
                         {
                             field: "XM", title: "姓名", sortable: true,
                             formatter: function (value, row, index) {
                                 return value;

                             }

                         },
                         {
                             field: "GRBH", title: "个人编号", sortable: true,
                             formatter: function (value, row, index) {
                                 return value;
                                 // return "<button class=‘btn btn-primary‘>编辑</button>     <button class=‘btn btn-primary‘>导出</button>"
                             }
                         },
                         {
                             field: "ZJHM", title: "证件号", sortable: true,
                             formatter: function (value, row, index) {
                                 return value;
                                 // return "<button class=‘btn btn-primary‘>编辑</button>     <button class=‘btn btn-primary‘>导出</button>"
                             }
                         },
                           {
                               field: "XB", title: "性别", sortable: true,
                               formatter: function (value, row, index) {
                                   if (value == "1")
                                       return "男";
                                   else
                                       return "女";
                                   // return "<button class=‘btn btn-primary‘>编辑</button>     <button class=‘btn btn-primary‘>导出</button>"
                               }
                           },
                             {
                                 field: "AD", title: "操作", sortable: true,
                                 formatter: function (value, row, index) {
                                     // return index + 1;

                                     return "<input type=‘button‘ class=‘myButton‘ onclick=‘bianji(" + row.GRBH + ")‘ style=‘background-color:darkblue;color:white;font-family:‘宋体‘‘ value=‘编辑‘></input>     <input type=‘button‘ class=‘myButton‘ onclick=‘daochu(" + row.GRBH + ")‘ style=‘background-color:darkblue;color:white;font-family:‘宋体‘‘ data-toggle=‘modal‘ data-target=‘#myModal‘ value=‘导出‘ ></input>"
                                 }
                             }


                     ]
                 });
             }

刷新表格

$(‘#tbGrid‘).bootstrapTable("refresh");

 

bootstrap table

标签:事件   ref   info   else   fine   json   中文支持   中文   function   

原文地址:http://www.cnblogs.com/xiongyang123/p/6699064.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!