设计实现
采用的是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>
394
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
