思诺BootStrap

获取 所在行索引 总行数 选中的行数据 所有数据

//所在行索引
formatter: function(value, row, index) { index }
onClickCell: function(field, value, row, $element) {var index = $element.parent().data('index');}

//总行数
var rows= $('#table_add').bootstrapTable('getData').length;

//数据
var data =   $("#" + tableId).bootstrapTable(('getData'));  // 所有数据
var rowsData = $("#bootstrap-table").bootstrapTable('getSelections');  //选中的行数据
var data = $("#table").bootstrapTable('getData')[index];  //根据行索引获取行数据

列表 后台格式为 TableDataInfo

@PostMapping("/list")
public TableDataInfo addList(WholeDepartment wholeDepartment) {
	return getDataTable(list);
}

$.table.init(options);
$.treeTable.init(options);
$.modal.openOptions(options);  //  跳出新窗口
$.table.search()

弹出窗口 关闭窗口

//关闭弹窗的窗口
  parent.layer.closeAll();

//确定按钮
submitHandler()
  
//跳出新窗口
  $.modal.open("案例", "/beforehand/casesIndicators/caseSelect");
  $.modal.openIndex('绩效年度', ctx+"system/user/yearChoosing", '280', '183');
  
//  跳出新窗口
     var options = {
            title: '公告详情',
            width: "1100",
            height: "760",
            url: prefix+"/detail/"+guid
        };
     $.modal.openOptions(options);

1.tableId

<table id="bootstrap-table" data-mobile-responsive="true" style="white-space: nowrap;"></table>

3.控制器

@PostMapping("/list")
@ResponseBody
public TableDataInfo list(EvaluationFundingPayDetail evaluationFundingPayDetail)
 {
  	startPage();
        List<EvaluationFundingPayDetail> list = evaluationFundingPayDetailService.selectEvaluationFundingPayDetailList(evaluationFundingPayDetail);
       return getDataTable(list);
 }

2.JS

//正常列表
$.table.init(options);
$(function() {
        var options = {
            url: ctx + "statistics/selectUnit",
            //双击
            onDblClickRow:function(row,$element){
   		 createMenuItem(ctx+"gather/selfEvaluation/detail/"+row.projectId,"评价详情")
 	    },
            columns: [
                {
                    checkbox: true
                },
                {
                    field : 'unit_name',
                    title : '单位名称'
                },
                {
                    field : 'projectNum',
                    title : '项目数量'
                },
                {
                    field : 'taskNum',
                    title : '任务下达情况',
                    sortable: true
                },
                {
                    field : 'applyNum',
                    title : '绩效申报情况',
                    visible: true
                },
                {
                    field : 'monitorNum',
                    title : '监控申报情况'
                },
                {
                    field : 'evaluationNum',
                    title : '评价申报情况'
                }
            ]
        };
        $.table.init(options);
    });
//树形列表
$.treeTable.init(options);
$(function() {
       var options = {
            url: prefix + "/list",
	    code: "deptId",
	    parentCode: "parentId",
	    uniqueId: "deptId",
	    expandAll: false,
	    expandFirst: true,
	    showSearch: false,
	    showRefresh: false,
	    showToggle: false,
	    showColumns: false,
	    odalName: "项目主管部门",
            columns: [
    			 {
			      field: 'selectItem',
			      radio: true
		         },
		     	{
			      field : 'code',
			      title : '部门代码',
			      formatter: function(value, row, index) {
				        if ($.common.isEmpty(row.icon)) {
	        			     return row.code;
	        			 } else {
	        			     return '<i class="' + row.icon + '"></i> <span class="nav-label">' + row.code + '</span>';
	        			 }
	    ] 
       };
       $.treeTable.init(options);
 });
	        			
	

双击

//写在option里
      onDblClickRow:function(row,$element){
     		 createMenuItem(ctx+"gather/selfEvaluation/detail/"+row.projectId,"评价详情")
      },
  

不换行 去掉四个图标

//加在table里
 style="white-space: nowrap;"

//加在option里
showExport: false,
showSearch: false,
showRefresh: false,
showToggle: false,
showColumns: false,
pagination : false,//是否分页
singleSelect : true,  //设置单选

操作按钮与下拉框

下拉框的回显 依靠 select = “selectd”

//编辑删除按钮
formatter: function(value, row, index) {
     var actions = [];
     actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" οnclick="$.operate.edit(\'' + row.evaluationTargetCompletionGuid + '\')"><i class="fa fa-edit"></i>编辑</a> ');
     actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.evaluationTargetCompletionGuid + '\')"><i class="fa fa-remove"></i>删除</a>');
     return actions.join('');
}

//增加行按钮 删除行按钮
formatter:function (value, row, index) {
   var actions = [];
   actions.push('<i style="color:red;vertical-align: middle" οnclick="deleteRow2(\'bootstrap-table\',' + index + ')" class="glyphicon glyphicon-trash"></i>');
   actions.push('&nbsp;<i style="color:green;vertical-align: middle" οnclick="insertRow2(\'bootstrap-table\',' + index +  ')" class="glyphicon glyphicon-plus-sign"></i></div>');
   return actions;
}

//填报页面三级指标最右边蓝色搜索框 和点击出现页面
if (i == 2) {
    columnOption.formatter = function (value, row, index) {
        if (row.type && row.type == '用户指标' && value != null) {
            value = '<i style="float:left" type="primary" class="glyphicon glyphicon-user">' + value + '</i>';
        } else if (value) {
            value = '<div style="float:left">' + value + '</div>'
        }
        var values = [];
        values.push(value);
        if (getRowEdited(index) && indicatorColumnEdited[1])
            values.push('<i οnclick="indicator_out_showModel(\'' + row.indicatorOne + '\',\'' + row.indicatorTwo + '\')" data-toggle="modal" data-target="#myModal5" class="glyphicon glyphicon-list" style="color:#2e82ff;float:right" ></i>');
        return values.join('');
    }
}

//下拉框

//1.formatter
formatter:initAchieValueTypeSelect

//2。显示下拉框与回显
/*下拉框回显*/
function initSelect(value, row, index){
    var field = this.field;
   var strHtml = "";
   if(value == "是"){
      strHtml =
                   "<select οnchange='reSetSelect("+index+",\"" + field + "\",this.options[this.options.selectedIndex].value)'>" +
            "<option value=' '>        </option>" +
            "<option value='是' selected >是</option>" +
            "<option value='否'>否</option>" +
            "</select>";
   }else if(value == "否") {
      strHtml =
                   "<select οnchange='reSetSelect("+index+",\"" + field + "\",this.options[this.options.selectedIndex].value)'>" +
            "<option value=' '>        </option>" +
            "<option value='是'>是</option>" +
            "<option value='否' selected >否</option>" +
            "</select>";
   }else {
      strHtml =
                   "<select οnchange='reSetSelect("+index+",\"" + field + "\",this.options[this.options.selectedIndex].value)'>" +
            "<option value=' ' selected>        </option>" +
            "<option value='是'>是</option>" +
            "<option value='否'>否</option>" +
            "</select>";
   }
   return strHtml;
}

//3.下拉框选择值发生变化
function reSetSelect(index,field,value) {
       $('#bootstrap-table').bootstrapTable('updateCell', {
           index: index,
           field: field,
           value: value
       });
       var datas = $('#bootstrap-table').bootstrapTable('getData', true);
       mergeTable2(datas,"bootstrap-table");
}