【www.bbyears.com--js教程】
实现功能：实现表格tr拖动，并保存因为拖动改变的等级.
jsp代码
菜单管理
请使用拖拽调整排列顺序
编号 |
菜单名称 |
菜单英文名称 |
菜单类型 |
是否显示 |
操作 |
<%
if (menuList != null && menuList.size() > 0) {
for (int i = 0;i < menuList.size();i++) {
JSONObject json = menuList.getJSONObject(i);
Menu menu = (Menu)JSONObject.toBean(json.getJSONObject("menu"),Menu.class);
%>
">
">
<%=menu.getLevel()%>
<%=menu.getMenuName()%>
<%=menu.getEnMenuName()==null?"":menu.getEnMenuName()%>
<%if(menu.getMenuType() == 0){%>系统类型<%}else if(menu.getMenuType() == 1){%>图文类型<%}else{%>链接类型<%}%>
<%if(menu.getState() == 0){ %>
<%}else{ %>
<%} %>
<%if(menu.getMenuType() != 0) {%>
" class="icon-trash delMtCenter">
<%} %>
<%if(menu.getMenuType() != 0) {%>
" class="icon-pencil mer_mod">
<%} %>
<%
}
} else {
%>
暂无数据
<%
}
%>
关于我们 |
微博 |
Blog |
服务条款 |
隐私政策
Incongress.com, All Rights Reserved.
<script src="/cvc/center/js/cached_lay_reports.js" type="text/javascript"></script>
<script src="/cvc/center/js/cached_lay_reports_cus.js" type="text/javascript"></script>
添加菜单
×
二级菜单
编号 |
菜单名称 |
菜单级别 |
二级菜单 |
菜单类型 |
修改 |
删除 |
<script type="text/javascript" src="<%=path %>/cvc/center/js/My97DatePicker/WdatePicker.js"></script>
<script src="<%=path%>/cvc/center/js/setting.js" type="text/javascript"></script>
<script src="<%=path%>/cvc/center/js/Validform_v5.3.2.js" type="text/javascript"></script>
<script charset="utf-8" src="<%=path%>/train/js/prettify/kindeditor.js"></script>
<script charset="utf-8" src="<%=path%>/train/js/prettify/lang/zh_CN.js"></script>
<script charset="utf-8" src="<%=path%>/train/js/prettify/plugins/code/prettify.js"></script>
<script type="text/javascript" src="<%=path %>/cvc/center/js/
jquery-1.10.2.min.js"></script>
<script charset="utf-8" type="text/javascript" src="<%=path %>/center/js/
jquery-ui.min.js"></script>
<script>
var editor1;
//改变菜单显示隐藏状态
function changeMenuState(menuName,menuId,state){
/*
if(menuName == "征文投稿"){
alert("请到基本信息模块中设置当前大会是否征文");
}else */if(menuName == "English"){
alert("请到基本信息模块中设置当前大会的中英文类型");
}else{
$.ajax({
url:"/webCenter.do",
type:"post",
dataType:"json",
data:"method=changeMenuState&menuId="+menuId+"&menuState="+state,
success:function(json){
if(json.state == 1){
window.location.reload();
}else{
alert("修改失败");
}
}
})
}
}
$("#showTable").sortable({
cursor: "move",
items: "tr", //只是tr可以拖动
opacity: 0.6, //拖动时，透明度为0.6
revert: true, //释放时，增加动画
stop: function(event, ui) { //更新排序之后
var categoryids = $("#showTable").sortable("toArray");
localStorage.categoryids = categoryids;
var level = 0;
$("#showTable tr").each(function(){
$(this).children("td").eq(0).html(level);
level += 1;
})
level = 0;
var content = "[";
$("#showTable tr").each(function(){
var level = $(this).children("td").eq(0).html();
var tdId = $(this).children("td").eq(0).attr("id");
if(tdId != undefined){
if(level == 1){
content += "{level:"+level;
content += ",menuId:"+tdId;
content += "}";
}else if(level > 1){
content += ",{level:"+level;
content += ",menuId:"+tdId;
content += "}";
}
}
level += 1;
})
content += "]";
$.ajax({
url:"<%=path%>/webCenter.do?updateMenuLevel",
type:"post",
dataType:"json",
data:"menuList="+content,
success:function(json){
}
})
}
});
$("#showTable").disableSelection();//让文字不可选
//选择二级菜单
$("#menu_level").change(function(){
$("#menu_parent").empty();
$("#menu_parent").append("
")
var level = $("#menu_level").val();
if(level == 1){
$("#menu_parent_tr").hide();
}else if(level == 2){
$.ajax({
url:"<%=path%>/webCenter.do?getFirstMenu",
type:"GET",
dataType:"json",
success:function(result){
if(result != null && result != "" && result.length > 0){
for(var i = 0; i< result.length;i++){
var option = "
"
console.log(option)
$("#menu_parent").append(option);
}
}else{
alert("还未创建任何一级菜单，先创建一级菜单后再创建耳机菜单");
}
}
})
$("#menu_parent_tr").show();
}
})
//选择图文类型
$("#menuType").change(function(){
if($("#menuType").val() == 1){
$("#imgTextTr").show();
$("#linkTr").hide();
$("#addZ").css("height","450px")
}else if($("#menuType").val() == 2){
$("#imgTextTr").hide();
$("#linkTr").show();
$("#addZ").css("height","180px")
}
})
//添加
$("#menu_add").click(function() {
var menuName = $("#menu_name").val();
var menuLevel = $("#menu_level").val();
var menuType = $("#menuType").val();
var menuUrl = $("#menuUrl").val();
if(menuName.trim() == "" || menuName.trim().length == 0){
alert("请输入菜单名称");
return false;
}
if(menuType == "-1"){
alert("请选择菜单类型");
return false;
}
if($("#menuType").val() == 1){
if($("#menuContent").val().trim() == "" || $("#menuContent").val().trim().length == 0){
alert("请填写图文内容");
return false;
}
}
if($("#menuType").val() == 2){
if(menuUrl.trim() == "" || menuUrl.trim().length == 0){
alert("请输入跳转地址");
return false;
}
}
var menuCount = <%=menuListSize%>;
if(menuCount >= 19 && $("#menuId").val() == -1){
alert("菜单最多只能添加九个");
return false;
}
$("#menuForm").submit();
$("#mask").hide();
$("#addLOGO").hide();
$("body").css("position", "fixed");
})
//弹出窗口
$("#addLG").click(function() {
$("#mask").show();
$("#addLOGO").show();
})
//取消
$(".tk1_header").click(function() {
location.reload();
})
$("#close").click(function() {
$("#zsType").val(0);
$("#zsHref").val("");
$("#mask").hide();
$("#addLOGO").hide();
$("body").css("position", "static");
})
//修改
$(".mer_mod").click(function() {
$("#mask").show();
$("#addLOGO").show();
$("body").css("position", "fixed");
$("#menuId").val(this.id);
$.ajax({
url:"<%=path%>/webCenter.do?getMenuById",
type:"get",
data:"menuId="+this.id,
dataType:"json",
success:function(data){
$("#menu_name").val(data.menuName);
$("#menuType").val(data.menuType);
if(data.menuType == 1){
$("#imgTextTr").show();
$("#linkTr").hide();
$("#addZ").css("height","450px")
editor1.html(data.content);
}if(data.menuType == 2){
$("#imgTextTr").hide();
$("#linkTr").show();
$("#addZ").css("height","80px")
}
}
})
})</script>