列表界面-自定义列功能

This commit is contained in:
chiguangxu
2018-03-13 16:10:58 +08:00
parent 939f7d68eb
commit 256c2b9f9b
5 changed files with 205 additions and 67 deletions

View File

@@ -13,7 +13,7 @@
<button type="button" class="btn btn-primary"
onClick="javascript:window.location='${ctx}/cfg/request/form'">
<i class="fa fa-plus"></i>
<spring:message code="add"></spring:message><spring:message code="requestInfo"></spring:message></button>
<spring:message code="add"/></button>
</div>
<h3 class="page-title">
@@ -41,7 +41,7 @@
<div class="pull-left">
<form:select path="isAudit" class="selectpicker select2 input-small" >
<form:option value="">所有状态</form:option>
<form:option value=""><spring:message code="all_states"/></form:option>
<form:option value="0"><spring:message code="created"></spring:message></form:option>
<form:option value="1"><spring:message code="approved"></spring:message></form:option>
</form:select>
@@ -50,14 +50,14 @@
<div class="pull-left">
<div class="input-group">
<div class="input-group-btn">
<select id="seltype" class="selectpicker select2 input-small" >
<option value="requestTitle"><spring:message code="title"></spring:message></option>
<option value="requestNumber"><spring:message code="request_number"></spring:message></option>
<option value="requestContent"><spring:message code="content"></spring:message></option>
</select>
<form:select path="seltype" class="selectpicker select2 input-small" >
<form:option value="requestTitle"><spring:message code="title"></spring:message></form:option>
<form:option value="requestNumber"><spring:message code="request_number"></spring:message></form:option>
<form:option value="requestContent"><spring:message code="content"></spring:message></form:option>
</form:select>
</div>
<input id="intype" class="form-control input-medium" placeholder="请输入标题" type="text">
<input id="intype" class="form-control input-medium" type="text" value="">
<div class="input-group-btn">
<button class="btn btn-default btn-search" type="button" onclick="page()"><i class="fa fa-search"></i></button>
@@ -65,28 +65,27 @@
</div>
</div>
<div class="pull-left">
<button type="button" class="btn btn-default" id="filter-btn"> 筛选 <i class="fa fa-angle-double-down"></i></button>
<button type="button" class="btn btn-default" id="filter-btn"> <spring:message code="filter"></spring:message> <i class="fa fa-angle-double-down"></i></button>
</div>
<div class="pull-right">
<button type="button" class="btn btn-default">
<i class="fa fa-edit"></i> 编辑</button>
<button type="button" class="btn btn-default">
<i class="fa fa-trash"></i> 删除</button>
<button type="button" class="btn btn-default" onclick="edit()">
<i class="fa fa-edit"></i> <spring:message code="edit"></spring:message></button>
<sys:delRow url="${ctx}/cfg/request/delete" id="contentTable" label="delete"></sys:delRow>
<!-- <button type="button" class="btn btn-default">
<i class="fa fa-download"></i> 导出</button> -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-wrench"></i> 审核
<i class="fa fa-wrench"></i> <spring:message code="examine"></spring:message>
<i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);" onclick="passOpt()"><i class="fa fa-check"></i> 通过</a></li>
<li><a href="javascript:void(0);" onclick="noPassOpt()"><i class="fa fa-remove"></i> 未通过</a></li>
<li><a href="javascript:void(0);" onclick="cancelPassOpt()"><i class="fa fa-undo"></i> 配置取消</a></li>
<li><sys:delRow url="${ctx}/cfg/request/requestExamine" id="contentTable" label="approved"></sys:delRow></li>
<li><sys:delRow url="${ctx}/cfg/request/requestExamineNo" id="contentTable" label="unapproved"></sys:delRow></li>
<li><sys:delRow url="${ctx}/cfg/request/requestCancelExamine" id="contentTable" label="cancelPass"></sys:delRow></li>
</ul>
</div>
@@ -109,14 +108,14 @@
<div class="col-md-6">
<div class="pull-left">
<label>来函时间</label>
<label><spring:message code="request_time"/></label>
</div>
<div class="pull-left">
<input id="beginDate" name="beginDate" type="text" readonly="readonly" maxlength="20" class="form-control input-small Wdate"
<input id="beginDate" name="beginDate" type="text" readonly="readonly" maxlength="20" class="form-control input-small Wdate" data-options="buttons:buttons"
value="<fmt:formatDate value="${requestInfo.beginDate}" pattern="yyyy-MM-dd"/>" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
</div>
<div class="pull-left">
<label></label>
<label><spring:message code="to"/></label>
</div>
<div class="pull-left">
<input id="endDate" name="endDate" type="text" readonly="readonly" maxlength="20" class="form-control input-small Wdate"
@@ -127,18 +126,18 @@
<div class="col-md-6">
<div class="pull-left">
<label>操作时间</label>
<label><spring:message code="operate_time"/></label>
</div>
<div class="pull-left">
<input id="beginDate" name="beginDate" type="text" readonly="readonly" maxlength="20" class="form-control input-small Wdate"
value="<fmt:formatDate value="${requestInfo.beginDate}" pattern="yyyy-MM-dd"/>" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
<input id="dobeginDate" name="dobeginDate" type="text" readonly="readonly" maxlength="20" class="form-control input-small Wdate"
value="<fmt:formatDate value="${requestInfo.dobeginDate}" pattern="yyyy-MM-dd"/>" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
</div>
<div class="pull-left">
<label></label>
<label><spring:message code="to"/></label>
</div>
<div class="pull-left">
<input id="endDate" name="endDate" type="text" readonly="readonly" maxlength="20" class="form-control input-small Wdate"
value="<fmt:formatDate value="${requestInfo.endDate}" pattern="yyyy-MM-dd"/>" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
<input id="doendDate" name="doendDate" type="text" readonly="readonly" maxlength="20" class="form-control input-small Wdate"
value="<fmt:formatDate value="${requestInfo.doendDate}" pattern="yyyy-MM-dd"/>" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:true});"/>
</div>
</div>
</div>
@@ -147,8 +146,8 @@
<div class="row">
<div class="pull-left">
<button type="button" class="btn blue" onclick="page()"> <i class="fa fa-search"></i> 搜索 </button>
<button type="button" class="btn btn-default" onclick="reset()"> <i class="fa fa-refresh"></i> 重置 </button>
<button type="button" class="btn blue" onclick="page()"> <i class="fa fa-search"></i> <spring:message code="search"/> </button>
<button type="button" class="btn btn-default" onclick="resetx()"> <i class="fa fa-refresh"></i> <spring:message code="reset"/> </button>
</div>
</div>
@@ -170,7 +169,7 @@
<table id="contentTable" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th><input type="checkbox" class="ckboxs"></th>
<th><input type="checkbox" class="i-checks" id="checkAll"></th>
<th><spring:message code="seq"></spring:message></th>
<th><spring:message code="request_number"></spring:message></th>
<th><spring:message code="request_organization"></spring:message></th>
@@ -181,13 +180,13 @@
<th><spring:message code="title"></spring:message></th>
<th><spring:message code="content"></spring:message></th>
<th><spring:message code="special_task"></spring:message></th>
<th><spring:message code="operation"></spring:message></th>
<%-- <th><spring:message code="operation"></spring:message></th> --%>
</tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="requestInfo">
<tr>
<td><input type="checkbox" class="ckbox"></td>
<td><input type="checkbox" class="i-checks" id="${requestInfo.id}" value="${requestInfo.isAudit}"></td>
<td>${requestInfo.id }</td>
<td>${requestInfo.requestNumber }</td>
<td>${requestInfo.requestOrg }</td>
@@ -214,30 +213,6 @@
<td>${requestInfo.requestTitle }</td>
<td>${requestInfo.requestContent }</td>
<td>${requestInfo.taskName }</td>
<td>
<%-- <div class="btn-group btn-xs">
<a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" href="#"><spring:message code="operation"></spring:message><span class="caret"></span></a>
<ul class="dropdown-menu btn-xs">
<!-- 审核未通过可修改 -->
<c:choose>
<c:when test="${requestInfo.isAudit eq '1'}">
<li><a href="${ctx}/cfg/request/requestCancelExamine?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="cancel"></spring:message></a></li>
</c:when>
<c:when test="${requestInfo.isAudit ne '2'}">
<li><a href="${ctx}/cfg/request/requestExamineNo?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="unapproved"></spring:message></a></li>
<li><a href="${ctx}/cfg/request/requestExamine?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="approved"></spring:message></a></li>
<li><a href="${ctx}/cfg/request/form?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="edit"></spring:message></a></li>
<li><a href="${ctx}/cfg/request/delete?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="delete"></spring:message></a></li>
</c:when>
<c:otherwise>
<li><a href="${ctx}/cfg/request/requestExamine?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="approved"></spring:message></a></li>
<li><a href="${ctx}/cfg/request/form?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="edit"></spring:message></a></li>
<li><a href="${ctx}/cfg/request/delete?id=${requestInfo.id}" onclick="return confirmx('<spring:message code="confirm_message"/>', this.href)"><spring:message code="delete"></spring:message></a></li>
</c:otherwise>
</c:choose>
</ul>
</div> --%>
</td>
</tr>
</c:forEach>
@@ -252,7 +227,18 @@
<script>
$(document).ready(function() {
if("${requestInfo.requestTitle}"){
$("#intype").val("${requestInfo.requestTitle}");
}
if("${requestInfo.requestNumber}"){
$("#intype").val("${requestInfo.requestNumber}");
}
if("${requestInfo.requestContent}"){
$("#intype").val("${requestInfo.requestContent}");
}else{
$("#intype").attr("placeholder","<spring:message code='input'/> "+$("#seltype").find("option:selected").text());
}
//筛选功能初始化
filterActionInit();
@@ -261,29 +247,58 @@
});
$("#seltype").change(function(){
$("#intype").attr("placeholder","请输入"+$(this).find("option:selected").text());
$("#intype").attr("placeholder","<spring:message code='input'/> "+$(this).find("option:selected").text());
});
//全选及取消
$("#checkAll").change(function(){
if($("#checkAll").prop("checked")){
$("input.i-checks").prop("checked",true);
}else{
$("input.i-checks").prop("checked",false);
}
});
});
function reset(){
$("#searchForm").reset();
function resetx(){
// $("#searchForm").reset();
$(':input','#searchForm')
.not(':button,:submit,:reset,:hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
}
//查询
function page(n,s){
$("#intype").attr("name",$("#seltype").val());
$("#pageNo").val(n);
$("#pageSize").val(s);
$("#searchForm").attr("action","${ctx}/cfg/request/list");
$("#searchForm").submit();
return false;
}
//编辑
function edit(){
var cked = $('tbody tr td input.i-checks:checkbox:checked');
if(cked.val()==1){
top.$.jBox.tip("<spring:message code='has_approved'/>", "<spring:message code='info'/>");
return;
}
if(cked.length==1){
window.location = "${ctx}/cfg/request/form?id="+cked.attr("id");
}else{
top.$.jBox.tip("<spring:message code='check_one'/>", "<spring:message code='info'/>");
return;
}
}
</script>
</body>
</html>
</html>

View File

@@ -21557,7 +21557,22 @@ Color library demo
}
.customColumnList {
padding-left:10px;
padding-top:10px;
}
.customColumnList label {
padding-left: 4px;
cursor: pointer;
vertical-align: middle;
}
.customColumnList input {
display: inline-block;
vertical-align: middle;
margin-bottom: 4px;
margin-right: 3px;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 B

After

Width:  |  Height:  |  Size: 67 B

View File

@@ -1,4 +1,4 @@
@charset "utf-8";*:focus{outline:0}.jbox-fade{background-color:#ccc}.jbox-drag{border:1px dashed #376ea5}div.jbox{padding:0;border:0;font-size:12px}div.jbox .jbox-border{background:none repeat scroll 0 0 #999;filter:alpha(opacity=20);-moz-opacity:.2;opacity:.2}div.jbox .jbox-container{background-color:#fff;border:1px solid #999}div.jbox .jbox-title-panel{background:#fff;border-bottom:1px solid #ccc;padding:8px 15px}div.jbox .jbox-title{font-weight:bold;color:#333;font-size:18px;line-height:27px;padding-top:0}div.jbox .jbox-title-icon{background:url(images/jbox-title-icon.gif) no-repeat scroll 3px 5px transparent}div.jbox .jbox-close,div.jbox .jbox-close-hover{background:url(images/jbox-close.gif) no-repeat scroll 0 0 transparent;margin:7px}div.jbox .jbox-close-hover{background-position:-16px 0}div.jbox .jbox-content{min-height:24px;line-height:18px;color:#444}div.jbox .jbox-content-loading{background-color:#e6e6e6}div.jbox .jbox-content-loading-image{background:url(images/jbox-content-loading.gif) no-repeat bottom center}div.jbox .jbox-button-panel{border-top:1px solid #ccc;background-color:#eee}div.jbox .jbox-bottom-text{text-indent:10px;color:#444}div.jbox .jbox-button{background:url(images/jbox-button1.png) repeat-x transparent;border:#aaa 1px solid;color:#888;border-radius:3px 3px 3px 3px;margin:1px 7px 0 0;height:20px;cursor:default}div.jbox .jbox-button-hover{background-position:0 -20px;color:#666}div.jbox .jbox-button-active{background-position:0 -40px}div.jbox-warning .jbox .jbox-button-panel{background-color:#fff}div.jbox .jbox-tip-color{background-color:#376ea5;border-color:#376ea5;border-radius:3px 3px 3px 3px;color:#fff}div.jbox span.jbox-icon{background:url(images/jbox-icons.png) no-repeat scroll 0 0 transparent;_background:url(images/jbox-icons-ie6.gif) no-repeat scroll 0 0 transparent}div.jbox span.jbox-icon-info{background-position:0 0}div.jbox span.jbox-icon-question{background-position:-36px 0}div.jbox span.jbox-icon-success{background-position:-72px 0}div.jbox span.jbox-icon-warning{background-position:-108px 0}
@charset "utf-8";*:focus{outline:0}.jbox-fade{background-color:#ccc}.jbox-drag{border:1px dashed #376ea5}div.jbox{padding:0;border:0;font-size:12px}div.jbox .jbox-border{background:none repeat scroll 0 0 #999;filter:alpha(opacity=20);-moz-opacity:.2;opacity:.2}div.jbox .jbox-container{background-color:#fff;border:1px solid #999}div.jbox .jbox-title-panel{background:#fff;border-bottom:1px solid #ccc;padding:8px 10px}div.jbox .jbox-title{font-weight:bold;color:#333;font-size:16px;line-height:27px;padding-top:0}div.jbox .jbox-title-icon{background:url(images/jbox-title-icon.gif) no-repeat scroll 3px 5px transparent}div.jbox .jbox-close,div.jbox .jbox-close-hover{background:url(images/jbox-close.gif) no-repeat scroll 0 0 transparent;margin:7px}div.jbox .jbox-close-hover{background-position:-16px 0}div.jbox .jbox-content{min-height:24px;line-height:18px;color:#444}div.jbox .jbox-content-loading{background-color:#e6e6e6}div.jbox .jbox-content-loading-image{background:url(images/jbox-content-loading.gif) no-repeat bottom center}div.jbox .jbox-button-panel{border-top:1px solid #ccc;background-color:#eee}div.jbox .jbox-bottom-text{text-indent:10px;color:#444}div.jbox .jbox-button{background:url(images/jbox-button1.png) repeat-x transparent;border:#aaa 1px solid;color:#888;border-radius:3px 3px 3px 3px;margin:1px 7px 0 0;height:20px;cursor:default}div.jbox .jbox-button-hover{background-position:0 -20px;color:#666}div.jbox .jbox-button-active{background-position:0 -40px}div.jbox-warning .jbox .jbox-button-panel{background-color:#fff}div.jbox .jbox-tip-color{background-color:#376ea5;border-color:#376ea5;border-radius:3px 3px 3px 3px;color:#fff}div.jbox span.jbox-icon{background:url(images/jbox-icons.png) no-repeat scroll 0 0 transparent;_background:url(images/jbox-icons-ie6.gif) no-repeat scroll 0 0 transparent}div.jbox span.jbox-icon-info{background-position:0 0}div.jbox span.jbox-icon-question{background-position:-36px 0}div.jbox span.jbox-icon-success{background-position:-72px 0}div.jbox span.jbox-icon-warning{background-position:-108px 0}
div.jbox span.jbox-icon-error{background-position:-144px 0}div.jbox span.jbox-icon-none{display:none;overflow:hidden}div.jbox span.jbox-icon-loading{background:url(images/jbox-loading1.gif) no-repeat scroll 0 0 transparent}
.jbox-container *{

View File

@@ -12,8 +12,17 @@ $(document).ready(function() {
$("a").bind("focus",function() {
if(this.blur) {this.blur()};
});
//所有下拉框使用select2 - 排除class为noSelect2的<select>元素
//$("select:not(.noSelect2)").select2();
//界面中存在<a class="setfields">自定义列按钮,初始化自定义列功能
if($("a").hasClass("setfields")) {
customColumnInit();
//绑定自定义按钮事件
$(".setfields").click(function(){
customColumnClick();
});
}
}catch(e){
// blank
@@ -327,4 +336,103 @@ function fiterPanleHide() {
}
//location.pathname 属性返回url的路径名如果存在 //替换为/
function getLocationPathName() {
return window.location.pathname.replace("\//","\/");
}
//自定义列设置事件
function customColumnClick(){
var submit = function(v,h,f) {
var abVisCols = [true];
$(".customColumnList input[type='checkbox']").each(function(){
abVisCols[$(this).val()] = $(this).prop("checked");
});
var key = getLocationPathName()+"_visCols";
Cookies.set(key,JSON.stringify(abVisCols),{expires:7});
customColumnInit();
return true;
}
var html = "<div class='customColumnList'>";
$(".table tr th").each(function(colIndex,obj){
if(colIndex==0) { //第一列th含 checkbox ,结束本次循环, 下标从1开始反之0开始
var ckVal = $(this).find("input[type='checkbox']").val();
if(typeof(ckVal) != "undefined") {
return true;
}
}
var checked = ($(this).is(":visible") ? "checked='checked'":"");
var ckbox_html = "<input type='checkbox' "+checked+" value='"+colIndex+"'/>";
html+="<div class='col-md-6'><label>"+ckbox_html+" "+$(this).html()+"</label></div>";
})
html +="</div>";
$.jBox(html,{title:"Custom Columns",submit:submit});
}
//自定义列初始化先取cookie 后取table tr th
function customColumnInit() {
var key = getLocationPathName()+"_visCols";
var abVisCols = Cookies.get(key);
if(abVisCols != null && abVisCols.length > 0) {
abVisCols = $.parseJSON(abVisCols);
$(abVisCols).each(function(indexCol,col){
if(col) {
//选中则显示
showColumn(indexCol);
}else {
hideColumn(indexCol);
}
})
}else {
$(".table tr th").each(function(){
var indexCol = $(this).index();
if($(this).attr("isVisible")=="false") {
hideColumn(indexCol);
}else {
//选中则显示
showColumn(indexCol);
}
});
}
}
//隐藏索引列
function hideColumn(index) {
$(".table tr").each(function() {
$(this).find("th:eq(" + index + ")").hide();
$(this).find("td:eq(" + index + ")").hide();
})
}
//显示索引列
function showColumn(index) {
$(".table tr").each(function() {
$(this).find("th:eq(" + index + ")").show();
$(this).find("td:eq(" + index + ")").show();
})
}