个人博客
2021年5月5日：
今天完善了搜索和表格，具体界面参考如下：
这个表格是我按照教程里打的，用了一个bootstrap-table的插件，样式是固定的包括分页条都是插件自带的，但是，因为是自带的所以有个缺点就是不能按照自己的要求进行改变，至少现在的我还不知道怎么改变一些插件自带的固定样式，当然，搜索和操作都是正常的，也可以进行多条件查询，基本的功能也算是齐全。
除了这个表格，最重要的就是这个操作，操作代码是较为麻烦的，以下是我的表格代码：
<div class="row">
<table id="table" data-toggle="table" data-pagination="true"
data-side-pagination="server" data-sort-name="id"
data-content-type="application/x-www-form-urlencoded"
data-sort-order="asc" data-method="post" data-ajax="ajaxRequest"
data-page-size="2" data-page-list="[2,3,5]"
data-url="${pageContext.request.contextPath}/club/list.json">
<thead>
<tr>
<th data-field="" data-formatter="rowNumber">序号</th>
<th data-field="id">社团id</th>
<th data-field="name" data-sortable="false">社团名称</th>
<th data-field="user_name" data-sortable="false">社长</th>
<th data-field="type_id" data-sortable="false"
data-formatter="clubtype">分类</th>
<th data-field="create_time" data-sortable="true">创建日期</th>
<th data-field="name" data-formatter="apply">操作</th>
</tr>
</thead>
</table>
</div>
JS代码：
<script type="text/javascript">
function rowNumber(value, row, index) {
var options = $('#table').bootstrapTable('getOptions');
return options.pageSize * (options.pageNumber - 1) + index + 1;
}
function check(value) {
window.location.href = '${pageContext.request.contextPath}/club/lookclub?name='
+ value;
}
function apply(value, row, index) {
return '<button type="button" class="btn btn-primary" onclick="check(\''
+ value
+ '\')">详情</button>'
+ "\n"
+ '<button type="button" class="btn btn-success shenqing" data-name="'
+ value + '" onclick="apply1(\'' + value + '\',\'' + row.user_name + '\')">申请</button>';
}
$(function(){
setTimeout(function(){}, 20);
})
function apply1(value,value1) {
window.location.href = '${pageContext.request.contextPath}/club/apply1?name='+ value+"&username="+value1;
}
function clubtype(value, row, index) {
var a;
$.ajax({
url : "${pageContext.request.contextPath}/club/clubtype",
data : "typeid=" + value,
type : "get",
dataType : "text",
async : false,
success : function(data) {
a = data;
}
})
return a;
}
function ajaxRequest(params) {
var club = {};
club.id = $("#clubId").val().trim();
club.name = $("#clubName").val().trim();
if ($("#clubType").val() > 0) {
club.type_id = $("#clubType").val();
}
params.data.obj = club;
$.ajax({
url : params.url,
data : JSON.stringify(params.data),
type : "POST",
contentType : "application/json",
dataType : "json",
success : function(data) {
params.success(data);
$.each($(".shenqing"), function(i,a) {
$.each(data.rows,function(i,v){
if(v.name==$(a).attr("data-name")){
if(v.renshu==v.peoplecount){
$(a).text("社团已满").attr("disabled",true).removeClass("btn-success").addClass("btn-secondary");
}
$.each(${applylist},function(){
if(this.club_name==$(a).attr("data-name")){
if(this.status==0){
if(v.renshu==v.peoplecount){
$(a).text("社团已满").attr("disabled",true).removeClass("btn-success").addClass("btn-secondary");
}
else
{
$(a).remove();
}
}
if(this.status==2){
$(a).text("已加").attr("disabled",true).removeClass("btn-success").addClass("btn-secondary");
}
}
})
}
})
})
}
})
}
function search() {
$("#table").bootstrapTable('refresh');
}
</script>
