bootstrap table

Posted on 2017-04-12 14:29  熊先生丶  阅读(159)  评论(0编辑  收藏  举报
  $('#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");