后台系统组件：一丶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: 1, //初始化加载第一页，默认第一页
　　pageSize: 10, //每页的记录行数（*）
　　pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
　　search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
　　strictSearch: false,
　　showColumns: true, //是否显示所有的列
　　showRefresh: true, //是否显示刷新按钮
　　minimumCountColumns: 2, //最少允许的列数
　　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)+1), //页码
　　　　sidx: "user_Id",　　
　　　　sord: 'desc',
　　　　param: postdata
　　};
　　return temp;
}

 

四.删除行的效果：

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

//    删除
$("#btn_delete").click(function () {
　　$($('#tb_departments').bootstrapTable('getSelections')).each(function(){
　　　　var passArgument = {
　　　　　　groupId:$(this)[0].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 == 0 ){
　　　　　　　　toastr.success('修改成功');
　　　　　　　　var data = {
　　　　　　　　　　url:'/dim/saveOrUpdateDimGroup.html',
　　　　　　　　　　data:passArgument,
　　　　　　　　　　success:function(res){
                 　　$('#tb_departments').bootstrapTable('refresh');  
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　ajax(data)     
　　　　　　}else{
　　　　　　　　toastr.error('修改失败，有冲突');
　　　　　　　　$el[0].innerHTML = oldValue  
　　　　　　}
　　　　},
　　　　error: function(){
　　　　　　toastr.error('修改失败，网络错误');
　　　　　　$el[0].innerHTML = oldValue               
　　　　}
　　}
　　ajax(data)
}