maven分类省市区点击展开与合并

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/WEB-INF/conf/functions.tld" prefix="f"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
%>
<script src="<%=request.getContextPath()%>/res/userjs/common.js"></script>
<style type="text/css">
.sample_2 {
    position: relative;
    top: -14px;
    right: -8px;
}
.citable{

}
</style>
<script type="text/javascript">

function proId(m){
    if($("#city"+m).css("display")=="none"){
        $("#city"+m).show();
    }else{
        $("#city"+m).hide();
    }
}
function citId(m){
    if($("#peace"+m).css("display")=="none"){
        $("#peace"+m).show();
    }else{
        $("#peace"+m).hide();
    }
}
function changeStatus(id){    
    customizeAjax({
        url:"/province/delete/"+id,
        successcallback:"location.reload()"
    });

}
function cityStatus(id){    
    customizeAjax({
        url:"/city/delete/"+id,
        successcallback:"location.reload()"
    });

}
function peaceStatus(id){    
    customizeAjax({
        url:"/peace/delete/"+id,
        successcallback:"location.reload()"
    });

}
$("a#provinces").fancybox({
    'overlayShow'    : true,
    'transitionIn'    : 'elastic',
    'transitionOut'    : 'elastic'
});
function search(){
    var order="";
    if ($("#provinceName").val()!=""){
        order+='|provinceName_s_lk_'+encodeURI($("#provinceName").val());
    }
    if ($("#provinceState").val()!=""){
        order+='|provinceState_s_eq_'+$("#provinceState").val();
    }
    if (order.length>0){
        order=order.substr(1);
    }
    location.href='#/province/provinces/1-10-'+order;
        
}


</script>

<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">系统管理</h3>
<div class="page-bar">
    <ul class="page-breadcrumb">
        <li><i class="fa fa-home"></i> <a>系统管理</a> <i
            class="fa fa-angle-right"></i></li>
        <li><a>操作员管理</a> <i class="fa fa-angle-right"></i></li>
    </ul>

</div>
<!-- END PAGE HEADER-->
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box grey-cascade">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-globe"></i>省份管理
                </div>

            </div>
            <div class="portlet-body">
                <div class="table-toolbar">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="btn-group">
                                <button id="sample_editable_1_new" class="btn green"
                                    οnclick="window.location.href='#/province/add';">
                                    添加省份<i class="fa fa-plus"></i>
                                </button>
                                </div>
                                <div class="btn-group">
                                            <button id="sample_editable_1_new" class="btn green"
                                            οnclick="window.location.href='#/city/add';">
                                                                                                    添加城市<i class="fa fa-plus"></i>
                                </button>
                                </div>
                                <div class="btn-group">
                                            <button id="sample_editable_1_new" class="btn green"
                                            οnclick="window.location.href='#/peace/add';">
                                                                                                      添加区域<i class="fa fa-plus"></i>
                                            </button>
                                </div>
                                </div>
                            </div>
                        </div>

                <div id="sample_1_wrapper" class="dataTables_wrapper no-footer">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <div class="dataTables_length" id="sample_1_length">
                                <label><select name="sample_1_length"
                                    aria-controls="sample_1"
                                    class="form-control input-xsmall input-inline"
                                    οnchange="changePath({pageIndex:${pager.pageIndex},selectorder:'${pager.selectorder}',controllerPath:'${pager.controllerpath}',pageSize:this.value})">
                                        <option value="5"
                                            <c:if test="${pager.pageSize=='5'}">selected</c:if>>5</option>
                                        <option value="10"
                                            <c:if test="${pager.pageSize=='10'}">selected</c:if>>10</option>
                                </select> 条</label>    
                            </div>
                        </div>
                        <div class="col-md-10 col-sm-12">
                            <div id="sample_1_filter" class="dataTables_filter">
                                <label>
                                    <div class="input-group input-middle input-daterange"
                                        style="float: left">
                                        <span class="input-group-addon"> 状态:</span> <select
                                            name="sample_1_length" aria-controls="sample_1"
                                            class="form-control  input-inline" name="provinceState"
                                            id="provinceState">
                                            <option value="">全部</option>
                                            <option value=0
                                                <c:forEach items="${pager.selectdata}" var="selectdate"> <c:choose><c:when test="${selectdate.columnname=='provinceState'&&selectdate.columnorginalvalue==0}">selected</c:when><c:otherwise></c:otherwise></c:choose></c:forEach>>停用</option>
                                            <option value=1
                                                <c:forEach items="${pager.selectdata}" var="selectdate"> <c:choose><c:when test="${selectdate.columnname=='provinceState'&&selectdate.columnorginalvalue==1}">selected</c:when><c:otherwise></c:otherwise></c:choose></c:forEach>>启用</option>
                                        </select>
                                    </div> <!-- - -->
                                    <div class="input-group input-middle input-daterange"
                                        style="float: left">
                                        <span class="input-group-addon">省份名称:</span> <input
                                            type="text" class="form-control" name="provinceName"
                                            id="provinceName"
                                            <c:forEach items="${pager.selectdata}" var="selectdate"> <c:choose><c:when test="${selectdate.columnname=='provinceName'}">value="${selectdate.columnorginalvalue}"</c:when><c:otherwise></c:otherwise></c:choose></c:forEach>>

                                    </div>
                                    <button class="btn green" οnclick="search();">查询</button>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="table-scrollable">
                        <table
                            class="table table-striped table-bordered table-hover dataTable no-footer"
                            id="sample_1" role="grid" aria-describedby="sample_1_info">
                            <thead>
                                <tr>
                                    <th>省份ID</th>
                                    <th>省份名称</th>
                                    <th>状态</th>
                                    <th>修改</th>
                                    <th>停用</th>
                                </tr>
                            </thead>
                            <tbody>
                                <c:forEach items="${pager.datas}" var="vm">
                                    <tr class="odd gradeX">

                                        <td οnclick="proId(${vm.id})">${vm.id}</td>
                                        <td>${vm.provinceName}</td>
                                        <td><c:choose>
                                                <c:when test="${vm.provinceState==1}">
                                                    <span class="label label-success">启用</span>
                                                </c:when>
                                                <c:otherwise>
                                                    <span class="label label-warning">停用</span>
                                                </c:otherwise>
                                            </c:choose></td>
                                        <td><a class="edit" href="#/province/update/${vm.id}">修改</a></td>
                                        <td><a class="delete"
                                            href="javascript:;Util.msgbox({type:'confirm',title:'提醒',content:'是否要修改该用户状态',closebtn:'false',callback:'changeStatus(${vm.id})'})">
                                                <c:choose>
                                                    <c:when test="${vm.provinceState==1}">
                                                停用
                                            </c:when>
                                                    <c:otherwise>
                                               启用
                                            </c:otherwise>
                                                </c:choose>
                                        </a></td>
                                    </tr>
                                    <tr style="display:none" id="city${vm.id}">
                                        <td colspan="5">
                                            <table
                                                class="table table-striped table-bordered table-hover dataTable no-footer sample_2 citable"
                                                style="text-align: center;" role="grid"
                                                aria-describedby="sample_1_info">
                                                <thead>
                                                    <tr style="background:#DCE7F5;">
                                                        <th>城市ID</th>
                                                        <th>城市名称</th>
                                                        <th>状态</th>
                                                        <th>修改</th>
                                                        <th>停用</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <c:forEach items="${vm.list}" var="vm1">
                                                        <tr class="odd gradeX">
                                                            <td οnclick="citId(${vm1.id})" style="background:#DCE7F5;">${vm1.id}</td>
                                                            <td style="background:#DCE7F5;">${vm1.cityName}</td>
                                                            <td style="background:#DCE7F5;"><c:choose>
                                                                    <c:when test="${vm1.cityState==1}">
                                                                        <span class="label label-success">启用</span>
                                                                    </c:when>
                                                                    <c:otherwise>
                                                                        <span class="label label-warning">停用</span>
                                                                    </c:otherwise>
                                                                </c:choose></td>
                                                            <td style="background:#DCE7F5;"><a class="edit" href="#/city/update/${vm1.id}">修改</a></td>
                                                            <td style="background:#DCE7F5;"><a class="delete"
                                                                href="javascript:;Util.msgbox({type:'confirm',title:'提醒',content:'是否要修改该用户状态',closebtn:'false',callback:'cityStatus(${vm1.id})'})">
                                                                    <c:choose>
                                                                        <c:when test="${vm1.cityState==1}">
                                                                    停用
                                                                </c:when>
                                                                        <c:otherwise>
                                                                   启用
                                                                </c:otherwise>
                                                                    </c:choose>
                                                            </a></td>
                                                        </tr>
                                                        <tr style="display:none" id="peace${vm1.id}">
                                                            <td colspan="5">
                                                                <table
                                                                    class="table table-striped table-bordered table-hover dataTable no-footer sample_2 petable"
                                                                    style="text-align: center;" role="grid"
                                                                    aria-describedby="sample_1_info">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>区域ID</th>
                                                                            <th>区域名称</th>
                                                                            <th>状态</th>
                                                                            <th>修改</th>
                                                                            <th>停用</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        <c:forEach items="${vm1.list}" var="vm2">
                                                                            <tr class="odd gradeX">
                                                                                <td>${vm2.id}</td>
                                                                                <td>${vm2.peaceName}</td>
                                                                                <td><c:choose>
                                                                                        <c:when test="${vm2.peaceState==1}">
                                                                                            <span class="label label-success">启用</span>
                                                                                        </c:when>
                                                                                        <c:otherwise>
                                                                                            <span class="label label-warning">停用</span>
                                                                                        </c:otherwise>
                                                                                    </c:choose></td>
                                                                                <td><a class="edit"
                                                                                    href="#/peace/update/${vm2.id}">修改</a></td>
                                                                                <td><a class="delete"
                                                                                    href="javascript:;Util.msgbox({type:'confirm',title:'提醒',content:'是否要修改该用户状态',closebtn:'false',callback:'peaceStatus(${vm2.id})'})">
                                                                                        <c:choose>
                                                                                            <c:when test="${vm2.peaceState==1}">
                                                                                            停用
                                                                                        </c:when>
                                                                                            <c:otherwise>
                                                                                           启用
                                                                                        </c:otherwise>
                                                                                        </c:choose>
                                                                                </a></td>
                                                                            </tr>
                                                                            <tr>

                                                                            </tr>
                                                                        </c:forEach>
                                                                    </tbody>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </c:forEach>
                                                </tbody>
                                            </table>
                                        </td>

                                    </tr>
                                </c:forEach>
                            </tbody>
                        </table>
                    </div>
                    <div class="row">
                        <!-- 开始分页 -->
                        ${pager.content}
                        <!-- 结束分页 -->
                    </div>
                </div>
            </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
</div>