bootstrapTable表
$('#exampleTable').bootstrapTable(
{
method: 'post', // 服务器数据的请求方式 get or post
url: prefix + "/list", // 服务器数据的加载地址
// showRefresh : true,
// showToggle : true,
// showColumns : true,
iconSize: 'outline',
toolbar: '#exampleToolbar',
striped: true, // 设置为true会有隔行变色效果
dataType: "json", // 服务器返回的数据类型
pagination: false, // 设置为true会在底部显示分页条
uniqueId: 'index', //将index列设为唯一索引
// queryParamsType : "limit",
// //设置为limit则会发送符合RESTFull格式的参数
singleSelect: false, // 设置为true将禁止多选
contentType : "application/x-www-form-urlencoded",
// //发送到服务器的数据编码类型
pageSize: 200, // 如果设置了分页,每页数据条数
pageNumber: 1, // 如果设置了分布,首页页码
//search : true, // 是否显示搜索框
showColumns: false, // 是否显示内容下拉框(选择显示的列)
sidePagination: "server", // 设置在哪里进行分页,可选值为"client" 或者 "server"
height:350,
queryParams: function (params) {
return {
//说明:传入后台的参数包括offset开始索引,limit步长,sort排序列,order:desc或者,以及所有列的键值对
limit: params.limit,
offset: params.offset,
nodeId:$("#nodeId").val(),
queryBtn: $("#queryBtn").val(),
thisNodeVal: parent.$("input[data-attribute='"+$("#dataAtt").val()+"']").val(),
name:$('#searchName').val(),//查询的值
typeModel:$("#typeModel").val() //判断是模型还是任务
};
},
// //请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果
// queryParamsType = 'limit' ,返回参数必须包含
// limit, offset, search, sort, order 否则, 需要包含:
// pageSize, pageNumber, searchText, sortName,
// sortOrder.
// 返回false将会终止请求
columns: [
{
checkbox: true
},
{
field: 'index',
title: '序列',
formatter:function(value, row, index) {
return row.index = index+1; //返回行号
}
},
{
field: 'cloumId',
title: '物理位置'
},
{
field: 'description',
title: '名称',
formatter: function(value,row,index){
var result ="<input id='"+index+"decription' data-placeholder='名称'" +
"class='form-control' "+(row.flag=='1'?'':'readonly')+" value='"+(value==undefined?'':value)+"' onblur='getValues("+index+")'>";
return result
}
},
{
field: 'typeName',
title: '字段类型',
formatter: function(value,row,index){
var result="";
result+="<select id='"+index+"' data-placeholder='字段类型'" +
"class='form-control chosen-select' tabindex='2' onchange='typeChange("+index+")'>";
for(var i=0;i<selectType.length;i++){
if(value==selectType[i]){
result+="<option value='"+selectType[i]+"' selected = 'selected' >"+selectType[i]+"</option>";
}else{
result+="<option value='"+selectType[i]+"'>"+selectType[i]+"</option>";
}
}
result+="</select>";
return result
}
},
{
field: 'operationType',
title: '运算类型',
formatter: function(value,row,index){
var result="";
result+="<select id='"+index+"operationType' data-placeholder='运算类型'" +
"class='form-control chosen-select' tabindex='2' onchange='typeChange("+index+")'>";
for(var i=0;i<selectOperationType.length;i++){
if(value==selectOperationType[i].value){
result+="<option value='"+selectOperationType[i].value+"' selected = 'selected' >"+selectOperationType[i].name+"</option>";
}else{
result+="<option value='"+selectOperationType[i].value+"'>"+selectOperationType[i].name+"</option>";
}
}
result+="</select>";
return result
}
},
{
field: 'name',
title: '编码',
formatter: function(value,row,index){
var result ="<input id='"+index+"name' data-placeholder='编码'" +
"class='form-control' value='"+(value==undefined?'':value)+"' onblur='getValues("+index+")'>";
return result
}
},
{
field: 'nullable',
title: '允许为空',
formatter: function(value,row,index){
var result="";
result+="<select id='"+index+"nullable' data-placeholder='允许为空'" +
"class='form-control chosen-select' tabindex='2' onchange='typeChange("+index+")'>";
if (value==null) {
value = "1";
}
for(var i=0;i<selectNullable.length;i++) {
if (value == selectNullable[i].value) {
result += "<option value='"+selectNullable[i].value+"' selected = 'selected' >"+selectNullable[i].bieName+"</option>";
} else {
result += "<option value='"+selectNullable[i].value+"'>"+selectNullable[i].bieName+"</option>";
}
}
result+="</select>";
return result
}
},
{
title: '操作',
field: 'ruleText',
align: 'center',
formatter: function (value, row, index) {
var val="<input id='"+index+"ruleText' data-placeholder='配置规则' class='form-control' type='hidden' value='"+(value==undefined?'':value)+"'>";
var e = '<a class="btn btn-primary btn-sm " href="#" mce_href="#" title="配置规则" onclick="edit(\'' + $("#nodeId").val() + '\',\'' + index +"ruleText"+ '\' ,\'' +$("#typeModel").val()+ '\' )"><i class="fa fa-edit"></i></a> ';
return e+ val;
}
}
]
});
下拉框
function typeChange(index){
var rows = $('#exampleTable').bootstrapTable('getData');
$.each(rows, function (i, row) {
if(row.index==(index+1)){
row.typeName=$("#"+index).val();
row.operationType=$("#"+index+"operationType").val();
row.nullable=$("#"+index+"nullable").val();
$('#exampleTable').bootstrapTable('updateRow',row);
return false;
}
});
}
function getValues(index){
var rows = $('#exampleTable').bootstrapTable('getData');
$.each(rows, function (i, row) {
if(row.index==(index+1)){
row.name=$("#"+index+"name").val();
row.description=$("#"+index+"description").val();
$('#exampleTable').bootstrapTable('updateRow',row);
return false;
}
});
}
新增行
function addRow(){
var row=
{
"cloumId":"",
"description":"",
"typeName":"",
"operationType":"",
"name":"",
"remarks":"",
"flag":"1",
"ruleText":"",
"nullable":"1"
};
//append 追加到最后一行
//prepend 新增到第一行
$('#exampleTable').bootstrapTable('append', row);
//更新行数据
$('#exampleTable').bootstrapTable('updateRow',row);
//定位到最后一行
$('#exampleTable').bootstrapTable('scrollTo', 'bottom');
}
效果:
选择多条删除:
function remove(){
var rows = $('#exampleTable').bootstrapTable('getSelections');//获取选中行
if (rows.length == 0) {
layer.msg("请选择要删除的数据");
return;
}
var indexs=[];
for(var i=0;i<rows.length;i++){
indexs[i]=rows[i].index;
}
//删除
$('#exampleTable').bootstrapTable('remove', {
field:'index',
values:indexs
});
}
更多推荐
bootstrapTable新增行,删除行
发布评论