bootstrap制作jsp页面（根据值让table显示选中）
本文实例为大家分享了bootstrap制作jsp页面的具体代码，告诉大家如何让table显示选中，供大家参考，具体内容如下
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%@includefile="/views/resource.jsp"%>
<bodystyle="background-color:transparent;">
<divclass="rowno-margin">
<divid="leftlist"
class="page-contentpage-content-innermargin-controlleft-containercol-xs-4col-sm-4col-md-4col-lg-4">
<divclass="config-title">
用户配置
<buttonid="adduser"type="button"class="btnbtn-default">
<iclass="glyphiconglyphicon-plus"></i>
</button>
<buttonid="deluser"type="button"class="btnbtn-default">
<iclass="glyphiconglyphicon-trash"></i>
</button>
</div>
<divid=""class="form-group">
<tableclass="table"id="tableuser"data-toggle="table">
<thead>
<tr>
<thdata-field='select'data-checkbox="true"></th>
<thdata-field="name">用户名称</th>
<thdata-field="login_name">登录名称</th>
</tr>
</thead>
</table>
</div>
<divclass="form-grouphiddenactive">
<divclass="config-none-center"id="nonetable">
<divclass="img-none"></div>
<divclass="text-none">
<p>当前状态为空</p>
</div>
</div>
</div>
</div>
<divid="internal_engine_right_container"
class="right-containercol-xs-8col-sm-8col-md-8col-lg-8">
<div>
<pclass="margin-controlconfig-title"id="add"
style="display:none">
新增配置
<buttonid="save"type="button"class="btnbtn-control">
<iclass="fafa-save"></i><spanid="addsave"> 保存</span>
</button>
</p>
<pclass="margin-controlconfig-title"id="message"
style="display:none">
详细信息
<buttonid="modifyMessage"type="button"class="btnbtn-control">
<iclass="fafa-save"></i><spanid="modifysave"> 保存</span>
</button>
</p>
</div>
<divclass="form-bodymargin-control"id=listuser>
<div
class="rowmargin-controlcol-xs-8col-sm-8col-md-8col-lg-8col-xs-offset-2col-sm-offset-2col-md-offset-2col-lg-offset-2hide">
<labelclass="col-xs-4col-sm-4col-md-4col-lg-4control-label">ID：</label>
<divclass="col-xs-8col-sm-8col-md-8col-lg-8">
<inputtype="text"class="form-control"placeholder=""
data-tabindex="1"id="id"name="id">
</div>
</div>
<div
class="rowmargin-controlcol-xs-8col-sm-8col-md-8col-lg-8col-xs-offset-2col-sm-offset-2col-md-offset-2col-lg-offset-2">
<labelclass="col-xs-4col-sm-4col-md-4col-lg-4control-label"
id=""name="">用户名称：</label>
<divclass="col-xs-8col-sm-8col-md-8col-lg-8">
<inputtype="text"class="form-control"placeholder=""
data-tabindex="1"id="name"name="name">
</div>
</div>
<div
class="rowmargin-controlcol-xs-8col-sm-8col-md-8col-lg-8col-xs-offset-2col-sm-offset-2col-md-offset-2col-lg-offset-2">
<labelclass="col-xs-4col-sm-4col-md-4col-lg-4control-label">登录名称：</label>
<divclass="col-xs-8col-sm-8col-md-8col-lg-8">
<inputtype="text"class="form-control"placeholder=""
data-tabindex="1"id="login_name"name="login_name">
</div>
</div>
<div
class="rowmargin-controlcol-xs-8col-sm-8col-md-8col-lg-8col-xs-offset-2col-sm-offset-2col-md-offset-2col-lg-offset-2">
<labelclass="col-xs-4col-sm-4col-md-4col-lg-4control-label">密码：</label>
<divclass="col-xs-8col-sm-8col-md-8col-lg-8">
<inputtype='password'style='display:none'name='password'>
<inputtype="password"class="form-control"placeholder=""
data-tabindex="1"id="password"name="password">
</div>
</div>
<div
class="rowmargin-controlcol-xs-8col-sm-8col-md-8col-lg-8col-xs-offset-2col-sm-offset-2col-md-offset-2col-lg-offset-2">
<labelclass="col-xs-4col-sm-4col-md-4col-lg-4control-label">确认密码密码：</label>
<divclass="col-xs-8col-sm-8col-md-8col-lg-8">
<inputtype='password'style='display:none'name='password'>
<inputtype='password'class="form-control"placeholder=""
data-tabindex="1"id="passwordagin"name="password">
<!--这里的name没实际作用-->
</div>
</div>
<div
class="rowmargin-controlcol-xs-8col-sm-8col-md-8col-lg-8col-xs-offset-2col-sm-offset-2col-md-offset-2col-lg-offset-2">
<labelclass="col-xs-4col-sm-4col-md-4col-lg-4control-label">邮箱：</label>
<divclass="col-xs-8col-sm-8col-md-8col-lg-8">
<inputtype="text"class="form-control"placeholder=""
data-tabindex="1"id="email"name="email">
</div>
</div>
<div
class="rowmargin-controlcol-xs-8col-sm-8col-md-8col-lg-8col-xs-offset-2col-sm-offset-2col-md-offset-2col-lg-offset-2">
<labelclass="col-xs-4col-sm-4col-md-4col-lg-4control-label">授权：</label>
<divid=""class="form-groupcol-xs-8col-sm-8col-md-8col-lg-8">
<tableclass="table"id="tableRole"data-toggle="table">
<thead>
<tr>
<thdata-field='state'data-checkbox="true"></th>
<thdata-field="id"class="hide">ID</th>
<thdata-field="name">名称</th>
<thdata-field="code">编码</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<divid=""
class="right-containercol-xs-8col-sm-8col-md-8col-lg-8hiddenactive">
<divclass="config-none-center"id="nonelist">
<divclass="img-none"></div>
<divclass="text-none"></div>
</div>
</div>
</div>
</body>
<scripttype="text/javascript">
vari=0;//控制初始化行数
vara=5;//控制具体进行修改或者删除或者增加之中的哪个操作
var$tableRole=$('#tableRole');
var$table=$('#tableuser');
vardatar=null;
functionnonedisplay(){//显示为空状态
$('#nonelist').show();
$('#nonetable').show();
};
functionnonedisappear(){//隐藏为空状态
$('#nonelist').hide();
$('#nonetable').hide();
}
functiondisappearBut(){//隐藏左上角的删除按钮
$('#deluser').hide();
}
functiondisplayBut(){//显示左上角的删除按钮
$('#deluser').show();
}
functiondisplayTopMessage(){//显示右上角详细信息
$('#message').show();
}
functiondisapperTopMessage(){//隐藏右上角详细信息
$('#message').hide();
}
functiondisplayTopAdd(){//显示右上角新增配置
$('#add').show();
}
functiondisapperTopAdd(){//隐藏右上角新增配置
$('#add').hide();
}
functiondisapperListUser(){//隐藏右边列表
$('#listuser').hide();
}
functiondisplayListUser(){//显示右边列表
$('#listuser').show();
}
functiondisapperTable(){//隐藏左边的table
$('#tableuser').hide();
}
functiondisplayTable(){//显示左边的table
$('#tableuser').show();
}
functionsetdata(data,datar){//得到左边table里边的值向右边的list进行赋值
$('#id').val(data[i].id);
$('#name').val(
data[i].name);
$('#login_name').val(
data[i].login_name);
$('#password').val(
data[i].password);
$('#passwordagin').val(
data[i].password);
$('#email').val(data[i].email);
varids=data[i].role_id.split(',');//左边table里查询到的id数组
for(varjinids){
for(varhindatar){
if(ids[j]==datar[h].id){
$tableRole.bootstrapTable('check',h);
}
}
}
}
//获得右边列表离得数据包括右边的table里选择的数据
functiongetdata(){
varrows=$("#tableRole").bootstrapTable("getSelections");
varids=[];
$.each(rows,function(index,row){
ids.push(row.id);
});
return{name:$('#name').val(),
login_name:$('#login_name').val(),
password:$('#password').val(),
email:$('#email')
.val(),
role_id:ids.toString()}
}
functioninitTableRadio(){
$('#tableRole').bootstrapTable('destroy');
$("#tableRole")
.bootstrapTable(
{
method:"get",
striped:true,
url:"<%=request.getContextPath()%>/role/list.do",
onLoadSuccess:function(record){
datar=record;
}
});
}
functioninitTable(){
initTableRadio();
$('#tableuser').bootstrapTable('destroy');
$("#tableuser")
.bootstrapTable(
{
method:"get",
striped:true,
url:"<%=request.getContextPath()%>/user/list.do",
onClickRow:function(row,tr){
$tableRole.bootstrapTable("uncheckAll");//每次点击行时先清空选择框
displayTopMessage();
disapperTopAdd();
i=tr[0].rowIndex-1;
$('#id').val(row.id);
$('#name').val(row.name);
$('#login_name').val(row.login_name);
$('#password').val(row.password);
$('#passwordagin').val(row.password);
$('#email').val(row.email);
varids=row.role_id.split(',');
console.log(ids)
for(varjinids){
for(varhindatar){
if(ids[j]==datar[h].id){
$tableRole.bootstrapTable('checkBy',{
field:'id',//
values:[datar[h].id]
});
}
}
}
},
onLoadSuccess:function(data){
if(data.length==0){
nonedisplay();
disapperListUser();
disappearBut();
disapperTable();
displayTopMessage();
}else{
nonedisappear();
displayTable();
if(a==0){//添加刷新时
displayBut();
disapperTopAdd();
displayTopMessage();
i=data.length-1;
setdata(data);
}elseif(a==3){//修改刷新时(也就是下边的$table.bootstrapTable("refresh",a=3);这个方法执行时)
displayTopMessage();
setdata(data);
}else{//刚进来页面或者删除刷新时
disapperTopAdd();
displayTopMessage();
$tableRole.bootstrapTable("uncheckAll");
setdata(data,datar);
}
}
}
});
}
$(function(){
initTable();
$('#adduser').click(function(){
displayListUser();
displayTopAdd();
disapperTopMessage();
$('#nonelist').hide();
$('#name').val("");
$('#login_name').val("");
$('#password').val("");
$('#passwordagin').val("");
$('#email').val("");
$tableRole.bootstrapTable("uncheckAll");
});
$('#addsave').click(function(){
varurl="${pageContext.request.contextPath}/user/insert.do";
varoption=getdata();
etl.ajaxJson(url,option,function(data){
$table.bootstrapTable("refresh",a=0);
});
});
$('#modifysave')
//根据这个id得到修改这个按钮的值
.click(function(){
varurl="${pageContext.request.contextPath}/user/update.do";
id=$('#id').val();
vardata=getdata();
data.id=id;
varoption=data;
etl.ajaxJson(url,option,function(data){
$table.bootstrapTable("refresh",a=3);
});
});
$('#deluser')
.click(
function(){
varrows=$table.bootstrapTable("getSelections");
if(rows.length<1){
alert("请至少选择一个!");
returntrue;
}
if(confirm("确认删除？")){
varids=[];
$.each(rows,function(index,row){
ids.push(row.id);
});
etl
.ajaxJson(
"${pageContext.request.contextPath}/user/del.do",
{
ids:ids
},function(data){
$table.bootstrapTable(
"refresh",i=0,
a=2);
})
}else{
returntrue;
}
});
})
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。