bootstrap-table(JS用法)

bootstrap-table(JS用法)

{layout name="layout4" /}
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-12">
                        <form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm">
                            <div class="form-group">
                                <input type="text" class="form-control" style="width: 280px" name="userName" id="userName"  placeholder="请输入客户手机号/微信号/备注">
                            </div>
                            <div class="form-group" >
                                <select name="d_id" class="form-control" id="parent_id">
                                    <option value="">请选择部门</option>
                                                        
                                </select>
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" name="userName" id="userName"  placeholder="请输入接收人姓名">
                            </div>
                            <div class="form-group">
                                <input placeholder="结束日期" class="form-control layer-date" id="endDate" name="endDate">
                            </div>
                            <div class="form-group">
                                <button type="button" id="queryBtn" οnclick="doQuery();" class="btn btn-primary">查询</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="container" style="width: 100%">
                <table id="demo-table"></table>
            </div>
        </div>        
    </div>
</div>

<script type="text/javascript">

	$(function () {
	    initTable();
	    initDate();
        var oTable = new TableInit();
        oTable.Init();
	});


function doQuery(params){
    $('#demo-table').bootstrapTable('refresh');    //刷新表格
}
function initTable(){
    $('#demo-table').bootstrapTable({
        url: '/admin/allot/datas.html', //请求后台的URL（*）table数据来源，json格式
        method: 'get', //请求方式（*）
        toolbar: '#toolbar', //工具按钮用哪个容器
        striped: true,  //是否显示行间隔色
        cache: true,    //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,   //是否显示分页（*）
        sortable: false,    //是否启用排序
        sortOrder: "asc",   //排序方式
        // queryParams: queryParams,//传递参数（*）
        sidePagination: "client", // 分页方式: 注意，这两种后台传过来的json数据格式也不一样  
                                  // client : 正常的json array格式 [{},{},{}] : client客户端分页
                                  // server:{“total”:0,”rows”:[]} 其中total表示查询的所有数据条数，后面的rows是指当前页面展示的数据量。:server服务端分页
        pageNumber:1,   //初始化加载第一页，默认第一页
        pageSize: 20,   //每页的记录行数（*）
        // pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
        search: true,   //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
        strictSearch: false, //设置为 true启用 全匹配搜索，否则为模糊搜索
        showColumns: false, //是否显示所有的列
        showRefresh: true, //是否显示刷新按钮  
        minimumCountColumns: 2, //最少允许的列数
        clickToSelect: true, //是否启用点击选中行
        height: $(window).height() - 110, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        width:$(window).width(),
        uniqueId: "kehutel", //每一行的唯一标识，一般为主键列
        showToggle:false,    //是否显示详细视图和列表视图的切换按钮
        cardView: false,     //是否显示详细视图
        detailView: false,   //是否显示父子表

        columns: [{
	        field: 'sender_depart',
	        title: '分配部门',
            align : 'center',
            valign : 'middle',
            sortable : true
	    }, {
	        field: 'sender_nickname',
	        title: '分配人',
            align : 'center',
            valign : 'middle',
            sortable : true
	    }, {
	        field: 'kehutel',
	        title: '客户手机号',
            align : 'center',
            valign : 'middle',
            sortable : true
	    }, {
	        field: 'kehuwx',
	        title: '客户微信号',
            align : 'center',
            valign : 'middle',
            sortable : true
	    }, {
	        field: 'friendnickname',
	        title: '客户昵称',
            align : 'center',
            valign : 'middle',
            sortable : true
	    }, {
	        field: 'friendnote',
	        title: '客户备注',
            align : 'center',
            valign : 'middle',
            sortable : true
	    }, {
	        field: 'fenpei_beizhu',
	        title: '分配备注',
            align : 'center',
            valign : 'middle',
            sortable : true
	    }, {
	        field: 'fenpei_time',
	        title: '分配时间',
            align : 'center',
            valign : 'middle',
            sortable : true
	    }, {
	        field: 'jieshou_depart',
	        title: '接收部门',
            align : 'center',
            valign : 'middle',
            sortable : true
	    }, {
	        field: 'jieshou_nickname',
	        title: '接收人',
            align : 'center',
            valign : 'middle',
            sortable : true
	    }]
    });
}

function initDate(){
    var start = {
            elem: '#startDate',
            format: 'YYYY-MM-DD hh:mm:ss',
            min: laydate.now(-7),
            max: laydate.now(),
            istime: true,
            istoday: false,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };
    var end = {
        elem: '#endDate',
        format: 'YYYY-MM-DD hh:mm:ss',
        min: laydate.now(-7),
        max: laydate.now(),
        istime: true, //是否开启时间选择
        isclear: true, //是否显示清空
        istoday: true, //是否显示今天
        issure: true, //是否显示确认
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);
}

function queryParams(params) {
    alert(params);
    var param = {
        orgCode : $("#orgCode").val(),
        friendnickname : $("#userName").val(),
        startDate : $("#startDate").val(),
        endDate : $("#endDate").val(),
        limit : this.limit, // 页面大小
        offset : this.offset, // 页码
        pageindex : this.pageNumber,
        pageSize : this.pageSize
    }
    return param;
} 


// 用于server 分页，表格数据量太大的话 不想一次查询所有数据，可以使用server分页查询，数据量小的话可以直接把sidePagination: "server"  改为 sidePagination: "client" ，同时去掉responseHandler: responseHandler就可以了，
// function responseHandler(res) { 
//     if (res) {
//         return {
//             "rows" : res.result,
//             "total" : res.totalCount
//         };
//     } else {
//         return {
//             "rows" : [],
//             "total" : 0
//         };
//     }
// }

$(document).ready(function() {
  $(".search").keyup(function () {
    var searchTerm = $(".search").val();
    var listItem = $('.results tbody').children('tr');
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
    
  $.extend($.expr[':'], {'containsi': function(elem, i, match, array){
        return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
  });
    
  $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','false');
  });

  $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','true');
  });

  var jobCount = $('.results tbody tr[visible="true"]').length;
    $('.counter').text(jobCount + ' item');

  if(jobCount == '0') {$('.no-result').show();}
    else {$('.no-result').hide();}
          });
});

// 时间戳转年月日
function strtotime_date(_strtotime){
    var _date = new Date(_strtotime).toLocaleString();
    return replaceAll(_date,'','-').substring(0, 10);
}

//str1为母字符串，str2为要替换的。str3为替换成的
function replaceAll(str1, str2, str3)
{
    var k
    var tmp = str1.split(str2)
    k = tmp[0]
    for (i = 1; i < tmp.length; i++) {
        k += str3 + tmp[i]
    }
    return k
}

</script>