后台系统组件:一丶bootstrap table


http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table)

http://www.cnblogs.com/landeanfen/p/5821192.html (bootstrap table editable)

以上两篇是我搜到的相关文章,并且在自己做的东西中也用到了,十分详细,适合刚接触的人阅读学习。

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

同时附录bootstrap-table的中文文档,其实bootstrap-table已经为我们做了很多,我们只需要传入数据,有需要时自己规定输入形式,编辑时的一些方法就差不多了。


下面就是我自己在使用过程中,自己遇到的一些问题,罗列出来,方便以后再次使用的时候,查阅学习。

一. json中的数据并非直接在表格中显示:

比如我json中返回了1/0,而我要显示的为是/否。这里可以用formatter自己定义输入

{
  field: 'channel_accounts_type',
  title: '操作',
  cellStyle:function(){
  return { classes: "hideExtraWord" }
  },
  detailFormatter: function (value, row, index) {
    var str = '/crfp2p/dim/toDimMain.html?groupNo='+row.groupNo+'&groupType='+row.groupType
    return '<a href="'+str+'" data-type="text">链接</a>';
  },
}

二.常见api,在开始推荐的文章链接中也有:

$('#tb_departments').bootstrapTable({
  url: url, //请求后台的URL(*)
  ajax: ajaxPost,
  method: 'post', //请求方式(*)
  toolbar: '#toolbar', //工具按钮用哪个容器
  striped: true, //是否显示行间隔色
  cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
  pagination: true, //是否显示分页(*)
  sortable: true, //是否启用排序
  sortOrder: "asc", //排序方式
  queryParams: ajaxParams, //传递参数(*)
  sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
  pageNumber: , //初始化加载第一页,默认第一页
  pageSize: , //每页的记录行数(*)
  pageList: [, , , ], //可供选择的每页的行数(*)
  search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
  strictSearch: false,
  showColumns: true, //是否显示所有的列
  showRefresh: true, //是否显示刷新按钮
  minimumCountColumns: , //最少允许的列数
  clickToSelect: false,//是否启用点击选中行
  //height: 550, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
  uniqueId: "序号", //每一行的唯一标识,一般为主键列
  showToggle: true, //是否显示详细视图和列表视图的切换按钮
  cardView: false, //是否显示详细视图
  detailView: false, //是否显示父子表
  onEditableSave: editSaved,
  columns: columns
});

三.查询参数(上面的ajaxParams):

这里根据后台需要的值传就可以,点击页码的时候,跟向后台请求相应的数据

function queryParams(params) {
  //var param_key = $("#formSearch #param_key").val();
  //var param_value = $("#formSearch #param_value").val();
  //var param_desc = $("#formSearch #param_desc").val();   var postdata = { };
  var temp = {  //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
    rows: params.limit,   //页面大小
    page: (parseInt(params.offset/params.limit)+), //页码
    sidx: "user_Id",  
    sord: 'desc',
    param: postdata
  };
  return temp;
}

四.删除行的效果:

删除时候的一个效果,可以再成功之后执行回调

//    删除
$("#btn_delete").click(function () {
  $($('#tb_departments').bootstrapTable('getSelections')).each(function(){
    var passArgument = {
      groupId:$(this)[].groupId
    }
    var argument = {
      url: '/dim/xxx.html',
      data:passArgument,
      success:function(res){
        toastr.success('删除成功!');
        console.log( $(":checked").parent().parent().fadeOut() )
        $(":checked").parent().parent().fadeOut();
      }
    }
    ajax(argument)
  })
})

五.对于行内编辑失效:

这里在failed里面加了一个把值改回原来的值,对于后台反馈失败的情况作出处理

function editSaved(field, row, oldValue, $el) {
var passArgument = {
groupDesc:row.groupDesc,
groupId:row.groupId,
groupName:row.groupName,
groupNo:row.groupNo,
groupType:row.groupType
  }
  var data = {
    url:   "/dim/findDimGroupByNo.html",
    data: passArgument,
    success: function (res, status) {
      if( res.retcode == ){
        toastr.success('修改成功');
        var data = {
          url:'/dim/saveOrUpdateDimGroup.html',
          data:passArgument,
          success:function(res){
  $('#tb_departments').bootstrapTable('refresh');
          }
        }
        ajax(data)
      }else{
        toastr.error('修改失败,有冲突');
        $el[].innerHTML = oldValue
      }
    },
    error: function(){
      toastr.error('修改失败,网络错误');
      $el[].innerHTML = oldValue
    }
  }
  ajax(data)
}
上一篇:maven项目常见问题


下一篇:网站里加入QQ在线客服