設計實現
採用的是ajax 和 js來實現
1.在頁面加載中觸發ajax動態數據獲取事件
2.將獲取到的數據動態的賦值到<option>標籤中
需要注意的點：
1.ajax的數據refresh和清除
$('.selectpicker').selectpicker('val', '');
$('.selectpicker').selectpicker('refresh');
2.selected 選擇後數據的獲取
var category = $.trim($('#slpk option:selected').val());
3.對成功接收的數據的處理
以json格式爲例
接口返回數據
{
"total": 6,
"rows": [
{
"id": 1,
"crTime": 1526973188000,
"name": "娛樂",
"level": 1,
"parentLevel": "root",
"visibility": null,
"bookmarkNumber": 1692
},
{
"id": 3,
"crTime": 1527159165000,
"name": "科技",
"level": 1,
"parentLevel": "root",
"visibility": null,
"bookmarkNumber": 740
},
{
"id": 9,
"crTime": 1537932274000,
"name": "時尚",
"level": 1,
"parentLevel": "root",
"visibility": null,
"bookmarkNumber": 257
},
{
"id": 10,
"crTime": 1537932282000,
"name": "金融",
"level": 1,
"parentLevel": "root",
"visibility": null,
"bookmarkNumber": 397
},
{
"id": 11,
"crTime": 1537932290000,
"name": "教育",
"level": 1,
"parentLevel": "root",
"visibility": null,
"bookmarkNumber": 66
},
{
"id": 13,
"crTime": 1542787072000,
"name": "拓展資源",
"level": 1,
"parentLevel": "root",
"visibility": null,
"bookmarkNumber": 136
}
]
}
ajax處理數據
success : function(datas) {//返回list數據並循環獲取
var select = $("#slpk");
for (var i = 0; i < datas.rows.length; i++) {
select.append("<option value='"+datas.rows[i].name+"'>"
+ datas.rows[i].name + "</option>");
}
}
jsp 源碼
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/css/bootstrap-select.min.css">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/bootstrap-table-1.8.1/src/bootstrap-table.css">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/bootstrap-table-1.8.1/dist/bootstrap-table.min.css">
<!-- 行內修改css要放在bootstrap 和bootstrap-table後 -->
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/bootstrap-table-1.8.1/bootstrap3-editable/css/bootstrap-editable.css"
rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script
src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
<script
src="${pageContext.request.contextPath}/static/bootstrap-table-1.8.1/src/bootstrap-table.js"></script>
<script
src="${pageContext.request.contextPath}/static/bootstrap-table-1.8.1/dist/bootstrap-table.min.js"></script>
<script
src="${pageContext.request.contextPath}/static/bootstrap-table-1.8.1/src/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/ztree/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/bootstrap-select.min.js"></script>
<script
src="${pageContext.request.contextPath}/static/bootstrap-table-1.8.1/dist/extensions/editable/bootstrap-table-editable.min.js"></script>
<!--行內修改數據 js要放在bootstrap 和bootstrap-table後-->
<script
src="${pageContext.request.contextPath}/static/bootstrap-table-1.8.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<title>RSS管理</title>
</head>
<body>
<button class="btn btn-info btn-search" style="margin-left: 3px"
data-toggle="modal" data-target="#myModal" >添加rss源</button>
<table id="table"></table>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel" onclick="dataSelect">添加rss源</h4>
</div>
<form id="form_data">
<div class="modal-body">
<!-- user_id: <input type="text" id="id" name="id"/> -->
<div class="form-group">
<div class="form-group">
<label>rss源名稱</label> <input type="text" class="form-control"
id="rssname">
</div>
<div class="form-group">
<label>rss源URL</label> <input type="text" class="form-control"
id="rssurl">
</div>
<label>rss源分類</label>
<select id="slpk" class="form-control selectpicker" ></select>
<!-- <select class="form-control" id="category">
<option value="娛樂">娛樂</option>
<option value="科技">科技</option>
<option value="時尚">時尚</option>
<option value="金融">金融</option>
<option value="教育">教育</option>
<option value="前端">前端</option>
<option value="瞎推薦">瞎推薦</option>
<option value="拓展資源">拓展資源</option>
</select> -->
</div>
<input type="hidden" id="act" value="add" name="act" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉
</button>
<button type="button" onclick="add_info()" class="btn btn-primary">
提交</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body>
<script type="text/javascript">
$('#table')
.bootstrapTable(
{
url : '${pageContext.request.contextPath}/RSS/getAllRSS',
striped : true, // 隔行加亮
pagination : true, //是否顯示分頁（*）
sortable : false, //是否啓用排序
sortOrder : "desc", //排序方式
toolbar : toolbar, //工具按鈕用哪個容器
singleSelect : true,
dataType : "json",
contentType : "application/json",
pageNumber : 1, //初始顯示時頁面序號
pageSize : 10, //初始顯示時頁面大小
pageList : [ 5, 10, 20, 50 ], //可供選擇的每頁的行數
clickToSelect : true, //是否啓用點擊選中行
sidePagination : "server",
queryParamsType : "",
queryParams : getPageMessage,//傳參數到後臺
minimunCountColumns : 2,
showToggle : true, //是否顯示詳細視圖和列表視圖的切換按鈕
showColumns : true, //是否顯示所有的列
showRefresh : true, //是否顯示刷新按鈕
onDblClickRow : function(row, $element) {
var id = row.ID;
EditViewById(id, 'view');
},
columns : [
{
field : "id",
title : "ID"
},
{
field : "rssname",
title : "rss源名稱"
},
{
field : "rssurl",
title : "rss源地址",
formatter : function(value, row, index) {
return '<a href = "'+value+'" target="_Blank">'
+ value + '</a>';
}
},
{
field : "rsscategory",
title : "rss源分類"
},
{
title : '操作',
field : 'id',
align : 'center',
formatter : function(value, row, index) {
return '<a href="${pageContext.request.contextPath}/RSS/deleteRSS?id='
+ value
+ '" onclick="return del()">刪除</a> ';
}
} ]
});
//傳遞參數到後臺
function getPageMessage(params) {
var temp = {
pageSize : params.pageSize,//頁面大小
pageNumber : params.pageNumber, //第幾頁開始查詢
};
return temp;
}
//確認刪除
function del() {
if (!confirm("確認要刪除？")) {
window.event.returnValue = false;
}
}
// 提交表單
function add_info() {
var category = $.trim($('#slpk option:selected').val());
var rssname = $.trim($('#rssname').val());
var rssurl = $.trim($('#rssurl').val());
$.ajax({
url : "${pageContext.request.contextPath}/RSS/addRSS",
data : {
rsscategory : category,
rssurl : rssurl,
rssname : rssname
},
type : "post",
beforeSend : function() {
$("#tip").html("<span style='color:blue'>正在處理...</span>");
return true;
},
success : function(data) {
if (null != data) {
var msg = "添加";
if (act == "edit")
msg = "編輯";
$("#tip").html(
"<span style='color:blueviolet'>恭喜，" + msg
+ "成功！</span>");
alert(msg + "成功");
location.reload();
} else {
$("#tip").html("<span style='color:red'>失敗，請重試</span>");
alert('操作失敗');
}
},
error : function() {
alert('rss已存在');
},
complete : function() {
$('#acting_tips').hide();
}
});
return false;
}
$(function () {
var selectedValues = [];
$("slpk:selected").each(function(){
selectedValues.push($(this).val());
});
$(".selectpicker").selectpicker({
noneSelectedText : '請選擇'
});
$(window).on('load', function() {
$('.selectpicker').selectpicker('val', '');
$('.selectpicker').selectpicker('refresh');
});
//下拉數據加載
$.ajax({
type : 'get',
url : "${pageContext.request.contextPath}/category/findCategory",
dataType : 'json',
success : function(datas) {//返回list數據並循環獲取
var select = $("#slpk");
for (var i = 0; i < datas.rows.length; i++) {
select.append("<option value='"+datas.rows[i].name+"'>"
+ datas.rows[i].name + "</option>");
}
$('.selectpicker').selectpicker('val', '');
$('.selectpicker').selectpicker('refresh');
}
});
});
</script>
</html>