bootstrap制作jsp頁(yè)面（根據(jù)值讓table顯示選中）
更新時(shí)間：2017年01月05日 15:28:32 作者：qq_29720781
這篇文章主要為大家詳細(xì)介紹了bootstrap做的jsp頁(yè)面,根據(jù)值讓table顯示選中，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了bootstrap制作jsp頁(yè)面的具體代碼，告訴大家如何讓table顯示選中，供大家參考，具體內(nèi)容如下
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/views/resource.jsp"%>
<body style="background-color: transparent;">
<div class="row no-margin">
<div id="leftlist"
class="page-content page-content-inner margin-control left-container col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="config-title">
用戶配置
<button id="adduser" type="button" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>
</button>
<button id="deluser" type="button" class="btn btn-default">
<i class="glyphicon glyphicon-trash"></i>
</button>
</div>
<div id="" class="form-group ">
<table class="table " id="tableuser" data-toggle="table">
<thead>
<tr>
<th data-field='select' data-checkbox="true"></th>
<th data-field="name">用戶名稱</th>
<th data-field="login_name">登錄名稱</th>
</tr>
</thead>
</table>
</div>
<div class="form-group hidden active">
<div class="config-none-center" id="nonetable">
<div class="img-none"></div>
<div class="text-none">
<p>當(dāng)前狀態(tài)為空</p>
</div>
</div>
</div>
</div>
<div id="internal_engine_right_container"
class="right-container col-xs-8 col-sm-8 col-md-8 col-lg-8 ">
<div>
<p class="margin-control config-title" id="add"
style="display: none">
新增配置
<button id="save" type="button" class="btn btn-control">
<i class="fa fa-save"></i><span id="addsave"> 保存</span>
</button>
</p>
<p class="margin-control config-title" id="message"
style="display: none">
詳細(xì)信息
<button id="modifyMessage" type="button" class="btn btn-control">
<i class="fa fa-save"></i><span id="modifysave"> 保存</span>
</button>
</p>
</div>
<div class="form-body margin-control" id=listuser>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 hide">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">ID：</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" class="form-control " placeholder=""
data-tabindex="1" id="id" name="id">
</div>
</div>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label"
id="" name="">用戶名稱：</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" class="form-control" placeholder=""
data-tabindex="1" id="name" name="name">
</div>
</div>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">登錄名稱：</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" class="form-control" placeholder=""
data-tabindex="1" id="login_name" name="login_name">
</div>
</div>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">密碼：</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type='password' style='display: none' name='password'>
<input type="password" class="form-control" placeholder=""
data-tabindex="1" id="password" name="password">
</div>
</div>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">確認(rèn)密碼密碼：</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type='password' style='display: none' name='password'>
<input type='password' class="form-control" placeholder=""
data-tabindex="1" id="passwordagin" name="password">
<!--這里的name沒(méi)實(shí)際作用 -->
</div>
</div>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">郵箱：</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" class="form-control" placeholder=""
data-tabindex="1" id="email" name="email">
</div>
</div>
<div
class="row margin-control col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">授權(quán)：</label>
<div id="" class="form-group col-xs-8 col-sm-8 col-md-8 col-lg-8">
<table class="table " id="tableRole" data-toggle="table">
<thead>
<tr>
<th data-field='state' data-checkbox="true"></th>
<th data-field="id" class="hide">ID</th>
<th data-field="name">名稱</th>
<th data-field="code">編碼</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div id=""
class="right-container col-xs-8 col-sm-8 col-md-8 col-lg-8 hidden active">
<div class="config-none-center" id="nonelist">
<div class="img-none"></div>
<div class="text-none"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var i=0; //控制初始化行數(shù)
var a=5; //控制具體進(jìn)行修改或者刪除或者增加之中的哪個(gè)操作
var $tableRole=$('#tableRole');
var $table= $('#tableuser');
var datar=null;
function nonedisplay(){//顯示為空狀態(tài)
$('#nonelist').show();
$('#nonetable').show();
};
function nonedisappear(){//隱藏為空狀態(tài)
$('#nonelist').hide();
$('#nonetable').hide();
}
function disappearBut(){ //隱藏左上角的刪除按鈕
$('#deluser').hide();
}
function displayBut(){//顯示左上角的刪除按鈕
$('#deluser').show();
}
function displayTopMessage(){ //顯示右上角詳細(xì)信息
$('#message').show();
}
function disapperTopMessage(){ //隱藏右上角詳細(xì)信息
$('#message').hide();
}
function displayTopAdd(){ //顯示右上角新增配置
$('#add').show();
}
function disapperTopAdd(){ //隱藏右上角新增配置
$('#add').hide();
}
function disapperListUser(){ //隱藏右邊列表
$('#listuser').hide();
}
function displayListUser(){ //顯示右邊列表
$('#listuser').show();
}
function disapperTable(){ //隱藏左邊的table
$('#tableuser').hide();
}
function displayTable(){//顯示左邊的table
$('#tableuser').show();
}
function setdata(data, datar){ //得到左邊table里邊的值向右邊的list進(jìn)行賦值
$('#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);
var ids= data[i].role_id.split(',');//左邊table里查詢到的id數(shù)組
for(var j in ids){
for(var h in datar){
if(ids[j]==datar[h].id){
$tableRole.bootstrapTable('check', h);
}
}
}
}
//獲得右邊列表離得數(shù)據(jù)包括右邊的table里選擇的數(shù)據(jù)
function getdata(){
var rows =$("#tableRole").bootstrapTable("getSelections");
var ids = [];
$.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() }
}
function initTableRadio(){
$('#tableRole').bootstrapTable('destroy');
$("#tableRole")
.bootstrapTable(
{
method: "get",
striped:true,
url: "<%=request.getContextPath()%>/role/list.do",
onLoadSuccess : function(record) {
datar=record;
}
});
}
function initTable() {
initTableRadio();
$('#tableuser').bootstrapTable('destroy');
$("#tableuser")
.bootstrapTable(
{
method: "get",
striped:true,
url: "<%=request.getContextPath()%>/user/list.do",
onClickRow : function(row, tr) {
$tableRole.bootstrapTable("uncheckAll");//每次點(diǎn)擊行時(shí) 先清空選擇框
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);
var ids = row.role_id.split(',');
console.log(ids)
for ( var j in ids) {
for ( var h in datar) {
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) {//添加刷新時(shí)
displayBut();
disapperTopAdd();
displayTopMessage();
i = data.length - 1;
setdata(data);
} else if (a == 3) {//修改刷新時(shí)(也就是下邊的$table.bootstrapTable("refresh", a = 3);這個(gè)方法執(zhí)行時(shí))
displayTopMessage();
setdata(data);
} else { //剛進(jìn)來(lái)頁(yè)面或者刪除刷新時(shí)
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() {
var url = "${pageContext.request.contextPath}/user/insert.do";
var option = getdata();
etl.ajaxJson(url, option, function(data) {
$table.bootstrapTable("refresh", a = 0);
});
});
$('#modifysave')
//根據(jù)這個(gè)id得到修改這個(gè)按鈕的值
.click(function() {
var url = "${pageContext.request.contextPath}/user/update.do";
id = $('#id').val();
var data = getdata();
data.id = id;
var option = data;
etl.ajaxJson(url, option, function(data) {
$table.bootstrapTable("refresh", a = 3);
});
});
$('#deluser')
.click(
function() {
var rows = $table.bootstrapTable("getSelections");
if (rows.length < 1) {
alert("請(qǐng)至少選擇一個(gè)!");
return true;
}
if (confirm("確認(rèn)刪除？")) {
var ids = [];
$.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 {
return true;
}
});
})
</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
uni-app是一種基于Vue.js的跨平臺(tái)開(kāi)發(fā)框架,允許開(kāi)發(fā)者使用統(tǒng)一的代碼編寫(xiě)多端應(yīng)用,這篇文章主要給大家介紹了關(guān)于uni-app?app引入天地圖的相關(guān)資料,需要的朋友可以參考下2024-02-02
layDate插件設(shè)置開(kāi)始和結(jié)束時(shí)間
這篇文章主要為大家詳細(xì)介紹了layDate插件設(shè)置開(kāi)始時(shí)間和結(jié)束時(shí)間，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
js回調(diào)函數(shù)仿360開(kāi)機(jī)
這篇文章主要為大家詳細(xì)介紹了js回調(diào)函數(shù)仿360開(kāi)機(jī)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
js實(shí)現(xiàn)仿阿里巴巴城市選擇框效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)仿阿里巴巴城市選擇框效果,實(shí)例分析了javascript結(jié)合css與數(shù)組實(shí)現(xiàn)城市選擇框的方法,需要的朋友可以參考下2015-06-06
想象一下，你把一個(gè)重要內(nèi)容放在一個(gè)彈出窗口，又不聚集到這個(gè)窗口。讓使用屏幕閱讀器的同學(xué)情何以堪，只有當(dāng)他們 tab 到這頁(yè)面結(jié)束，還繼續(xù) tab，才可能找到這個(gè)彈窗2011-10-10
js加載之使用DOM方法動(dòng)態(tài)加載Javascript文件
傳統(tǒng)上，加載Javascript文件都是使用script標(biāo)簽，我們也可以使用DOM方法，動(dòng)態(tài)加載Javascript文件，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-11-11
僅IE支持clearAttributes/mergeAttributes方法使用介紹
僅IE中HTMLElement元素具有clearAttributes/mergeAttributes方法，它們都是非標(biāo)準(zhǔn)的2012-05-05
Bootstrap實(shí)現(xiàn)的經(jīng)典柵格布局效果實(shí)例【附demo源碼】
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)的經(jīng)典柵格布局效果,結(jié)合具體實(shí)例形式分析了基于BootStrap實(shí)現(xiàn)柵格布局的完整步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
VSCode 添加自定義注釋的方法(附帶紅色警戒經(jīng)典注釋風(fēng)格)
這篇文章主要介紹了VSCode 添加自定義注釋的方法(附帶紅色警戒經(jīng)典注釋風(fēng)格),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
JavaScript 未結(jié)束的字符串常量常見(jiàn)解決方法
做JavaScript的時(shí)候,發(fā)現(xiàn)老是出現(xiàn)錯(cuò)誤：“未結(jié)束的字符串常量”. 自己找了下應(yīng)該是傳參數(shù)的時(shí)候,有特殊字符引起的.網(wǎng)上也找了下,也有好多出現(xiàn)這種情況.做下總結(jié),以方便以后查閱.2010-01-01