threeTable 树状菜单 CRUD 操作

最新推荐文章于 2023-07-12 12:21:07 发布
最新推荐文章于 2023-07-12 12:21:07 发布
阅读量847 收藏
点赞数
分类专栏： java 文章标签： threeTable 菜单权限 crud
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24192465/article/details/83791406
版权

 HTML

<!--<%@ page language="java" pageEncoding="UTF-8"%>-->
<!--新建菜单-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 content_style_div">
        <div class="add_div"> 
            <form id="add_form" onsubmit="return false">
                <fieldset class="school_fieldset">
                <legend>添加菜单数据</legend>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form_div">
                
                 	<div class="col-lg-6 -col-md-6 col-sm-12 col-xs-12">
                        <label class="allwidth_label">系统编号：<em class="star_em"></em></label>
                       <select class="default_select" id="sysCode" required>
                       </select>
                    </div>
                
                    <div class="col-lg-6 -col-md-6 col-sm-12 col-xs-12">
                        <label class="allwidth_label">菜单编号：<em class="star_em"></em></label>
                        <input type="text" id="menuCode" numOnly="true" name="b1" class="default_input" placeholder="" required />
                    </div>
                    <div class="col-lg-6 -col-md-6 col-sm-12 col-xs-12">
                        <label class="allwidth_label">菜单名称：<em class="star_em"></em></label>
                        <input type="text" id="menuName" name="b2" class="default_input" required />
                    </div>
                    <div class="col-lg-6 -col-md-6 col-sm-12 col-xs-12">
                        <label class="allwidth_label">菜单别名：<em class="star_em"></em></label>
                        <input type="text" id="menuAlias" name="b3" class="default_input" required />
                    </div>
                    <div class="col-lg-6 -col-md-6 col-sm-12 col-xs-12">
                        <label class="allwidth_label">父菜单编号：</label>
                        <input type="text" id="parentCode" numOnly="true" name="b4" class="default_input"  />
                    </div>
                    <div class="col-lg-6 -col-md-6 col-sm-12 col-xs-12">
                        <label class="allwidth_label">菜单URL：<em class="star_em"></em></label>
                        <input type="text" id="menuUrl" name="b5" class="default_input" required />
                    </div>
                    
                    <div class="col-lg-6 -col-md-6 col-sm-12 col-xs-12">
                        <label class="allwidth_label">层级：<em class="star_em"></em></label>
                        <input type="text" id="level" name="b6" class="default_input" required/>
                    </div>
                    
                     <div class="col-lg-6 -col-md-6 col-sm-12 col-xs-12">
                        <label class="allwidth_label">序号：<em class="star_em"></em></label>
                        <input type="text" id="seqNum" numOnly="true" name="b7" class="default_input"  required />
                    </div>
                    
                    <div class="newly_center_button_div">
                        <button class="default_btn newschool" type="submit" onclick="treegrid.add_btn()">创建</button>
                        <button class="default_btn anti_btn clicked" type="reset" value="Reset">重置</button>
                    </div>
                </div>
                </fieldset>    
            </form>
        </div>
        <div id="tableMain" class="tree_table">
        	<div class="allwidth_pb_label">
                <button class="default_btn gray_btn" onclick="treegrid.import_menu_data()">导入数据</button>
                <button class="default_btn gray_btn" onclick="treegrid.export_menu_data()">导出数据</button>
            </div>
            <table id="tb"></table>
        </div>
    </div>
<!--修改内容弹出窗口-->
<script type="text/html" id="menu_template">
    <form id="menu" onsubmit="return false">
		<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><label class="allwidth_label">系统编号<em class="star_em"></em></label><input type="text" class="default_input" id="inputtext_00" placeholder="系统编号" name="p0" required /></div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><label class="allwidth_label">菜单编号<em class="star_em"></em></label><input type="text" class="default_input" id="inputtext_01" placeholder="菜单编号" name="p1" numOnly="true" required/></div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><label class="allwidth_label">菜单名称<em class="star_em"></em></label><input type="text" class="default_input" id="inputtext_02" placeholder="菜单名称" name="p2" required /></div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><label class="allwidth_label">菜单别名<em class="star_em"></em></label><input type="text" class="default_input" id="inputtext_03" placeholder="菜单别名" name="p3" required /></div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><label class="allwidth_label">父菜单编号</label><input type="text" class="default_input" id="inputtext_04" placeholder="父菜单编号" numOnly="true" name="p4" /></div>
		<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><label class="allwidth_label">菜单URL<em class="star_em"></em></label><input type="text" class="default_input" id="inputtext_05" placeholder="菜单URL" name="p5" required /></div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><label class="allwidth_label">层级<em class="star_em"></em></label><input type="text" class="default_input" id="inputtext_06" placeholder="层级" name="p6" required /></div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><label class="allwidth_label">序号<em class="star_em"></em></label><input type="text" class="default_input" id="inputtext_07" placeholder="序号" name="p7" numOnly="true" required /></div>
		<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"><input type="hidden" class="default_input" id="inputtext_08"   /></div>
    </form>    
</script>
<!--增加角色弹出窗口-->
<script type="text/html" id="addrole_template">	
    <form id="addrole" onsubmit="return false" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
		<div class="col-12 text-center">当前菜单名称：<span id="role_name"></span> 菜单编号：<span id="role_id"></span></div>
        <fieldset class="school_fieldset">
            <legend>角色类型</legend>
            <div class="create_role_div">
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="00" />超级管理员</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="10" />牧分管理员</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="11" />牧分运维员</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="20" />渠道管理员</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="21" />渠道运维员</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="30" />学校管理员</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="31" />校长</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="32" />教务</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="33" />年级组长</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="34" />班主任</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="35" />教研组长</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="36" />备课组长</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="37" />任课老师</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="40" />机构管理员</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="41" />机构教研员</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="42" />机构校长</label>
                <label class="col-lg-3 col-md-3 col-sm-6 col-xs-6"><input type="checkbox" value="50" />家长用户</label>
            </div>
        </fieldset>        
    </form>    
</script>

js


 var treeData = {};
     var treegrid={
    		 
    		 
         //添加按钮
         add_btn: function(){
        //限定只能输入数字方法
        	 Men.only_number();
        //校验
        $("#add_form").formValidator();
        var r = $("#add_form").validate().form();
             if(r){
             var sysCode = $("#sysCode").val().trim();
             //var menuCode = sysCode+''+$("#menuCode").val().trim();
             var menuCode = $("#menuCode").val().trim();
             var menuName = $("#menuName").val().trim();
             var menuAlias = $("#menuAlias").val().trim();
             var parentCode = $("#parentCode").val().trim();
             var menuUrl = $("#menuUrl").val().trim();
             var level = $("#level").val().trim();
             var seqNum = $("#seqNum").val().trim();
             //treeData.push(list);console.log(treeData);
             treegrid.clearError();  
             
             if(parentCode != ''){
              	var data = {
           				"sys.sysCode" : sysCode,
           				"menuCode" : menuCode,
           				"menuName" : menuName,
           				"menuAlias" : menuAlias,
           				"parent.menuCode" : parentCode,
           				"menuUrl" : menuUrl,
           				"level" : level,
           				"seqNum" : seqNum
           			};
              }else{
              	var data = {
           				"sys.sysCode" : sysCode,
           				"menuCode" : menuCode,
           				"menuName" : menuName,
           				"menuAlias" : menuAlias,
           				"menuUrl" : menuUrl,
           				"level" : level,
           				"seqNum" : seqNum
           			};
              }    
              var datas=treegrid.judge_newly('../ume/sys/um/menu/create',data); 
             } 
         },
         
         judge_newly:function(url,datas,dt){
         	$(".default_btn.edit_row_btn").attr("disabled","disabled");
         	Men.close_window();
         	Tomd.wait('保存中...');
             var td = dt || 'table';
             var v = treegrid.post_data(url,datas);        
             if(v.code==0){
     			Tomd.waitok();
     			treegrid.reset_treegrid();
     			return true;
     		}
     		else{
     			Tomd.waitok();
     			return false;
     		}       
         },
         post_data : function(url, data) {
         	//Tomd.wait('加载中...');
     		var datas;
     		$.ajax({
     			type : "post",
     			async:false,
     			url : url,
     			data : data,
     			success : function(s) {
     				//Tomd.waitok();
     				datas = s;
     				Tomd.toast('right', 'success', s.message);
     			},
     			error : function(XMLHttpRequest, textStatus, errorThrown) {
     				datas = XMLHttpRequest;
     				console.error("XMLHttpRequest:",XMLHttpRequest);
     				console.error("textStatus:",textStatus);
     				console.error("errorThrown:",errorThrown);
                     //Tomd.toast('right', 'error', e.data.message);
     			}
     		});
     		return datas;
     	},

         getTreeData : function(){
         	var data = {};
      		treeData = Men.get_data("../ume/sys/um/menu/list", data);
          },
         
        //生成treeTable
        create_treeTable: function(){
            $('#tb').treegridData({
                id: 'menuCode',
                parentColumn: 'parentCode',
                data:treeData,
               // type: "GET", //请求数据的ajax类型                
               // url: '../ume/sys/um/menu/list',   //请求数据的ajax的url
                ajaxParams: {}, //请求数据的ajax的data属性
                animate:true,                    //是否开启动画
                expandColumn: null,//在哪一列上面显示展开按钮
                fitColumns:true,                 //设置为true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
                striped: true,   //是否各行渐变色
                bordered: true,  //是否显示边框
                //expandAll: false,  //是否全部展开
                columns: [
                          
					{
					    title: '菜单名称',
					    field: 'menuName',
					    checkbox: '1'
					},
					{
					    title: '菜单别名',
					    field: 'menuAlias'
					},
					{
					    title: '菜单编号',
					    field: 'menuCode'
					},
					{
					    title: '系统编号',
					    field: 'sys.sysCode'
					},  
                    {
                        title: '父菜单编号',
                        field: 'parentCode'
                    },
                    {
                        title: '父菜单名称',
                        field: 'parent.menuName'
                    },
                    {
                        title: '菜单url',
                        field: 'menuUrl'
                    },
                    {
                        title: '层级',
                        field: 'level'
                    },
                    
                    {
					    title: '序号',
					    field: 'seqNum'
					},    
                    
                    {
                        title: '编辑'
                    }
                ]
            });
        },
        //修改窗口 打开
        editor_open: function (code){             
        var html = $("#menu_template").html();
        Men.new_window('修改菜单信息', html, '取消', this.editor_btn);
        $('.center_button_div').prepend('<button class="default_btn edit_row_btn" onclick="Men.alert_ok()">保存</button>');
        //要用ajax找后台数据. 下一条是本地数据,程序员删掉！

        var data={code: code};    
        var datas = Men.get_data("../ume/sys/um/menu/get", data);
      //限定只能输入数字方法
      	 Men.only_number();
        $("#inputtext_00").val(datas.sys.sysCode);
        $("#inputtext_01").val(datas.menuCode); 
        $("#inputtext_02").val(datas.menuName);
        $("#inputtext_03").val(datas.menuAlias);
        if(datas.parent != undefined){
        	$("#inputtext_04").val(datas.parent.menuCode);
        }
        $("#inputtext_05").val(datas.menuUrl); 
        $("#inputtext_06").val(datas.level);
        $("#inputtext_07").val(datas.seqNum);
        $("#inputtext_08").val(datas.id);
        },
        //修改窗口 按钮
        editor_btn: function(){
       
        //校验
        $("#menu").formValidator();
        var r = $("#menu").validate().form();
        if (r) {
            //从input中传值
            var sysCode = $("#inputtext_00").val().trim();
            var menuCode = $("#inputtext_01").val().trim();
            var menuName = $("#inputtext_02").val().trim();
            var menuAlias = $("#inputtext_03").val().trim();
            var parentCode = $("#inputtext_04").val().trim();
            var menuUrl = $("#inputtext_05").val().trim();
            var level = $("#inputtext_06").val().trim();
            var seqNum = $("#inputtext_07").val().trim();
            var id = $("#inputtext_08").val().trim();
            var datas = {
            		"id" : id,
     				"sys.sysCode" : sysCode,
     				"menuCode" : menuCode,
     				"menuName" : menuName,
     				"menuAlias" : menuAlias,
     				"menuUrl" : menuUrl,
     				"level" : level,
     				"seqNum" : seqNum
     			};
            
            if(parentCode != ''){
            	var datas = {
                		"id" : id,
         				"sys.sysCode" : sysCode,
         				"menuCode" : menuCode,
         				"menuName" : menuName,
         				"menuAlias" : menuAlias,
         				"parent.menuCode" : parentCode,
         				"menuUrl" : menuUrl,
         				"level" : level,
         				"seqNum" : seqNum
         			};
            }else{
            	var datas = {
                		"id" : id,
         				"sys.sysCode" : sysCode,
         				"menuCode" : menuCode,
         				"menuName" : menuName,
         				"menuAlias" : menuAlias,
         				"menuUrl" : menuUrl,
         				"level" : level,
         				"seqNum" : seqNum
         			};
            }
            treegrid.judge_editor('../ume/sys/um/menu/update', datas);
                       
           }              
        }, 
        
        
        judge_editor:function(url,datas,dt){
        	Men.close_window();
        	Tomd.wait('修改中...');
            var td = dt || 'table';
            var v = Men.post_data(url,datas);        
        		if(v.code==0){
        			Tomd.waitok();
        			treegrid.reset_treegrid();  
            		return true;
        		}
        		else{
        			Tomd.waitok();
        			return false;
        		}    			   
        },
        
        
      //清空错误提示和校验
        clearError: function(){
             document.getElementById("add_form").reset();
            setTimeout(function(){
                $("#add_form input").removeClass("error");
                $("#add_form label.error").remove();
            },100);             
        },
        //删除按钮
        del_btn: function(code){
             //ajax删除
        	treegrid.del_list({id:`${code}`},0,'../ume/sys/um/menu/delete');  
        }, 
        del_list:function(data,row,url,td,con){    	 
            var td = td || 'table';
            var content = con || '确实要删除此条吗？';
            var html=`<div class="center_text_div">${content}</div>`;
            Men.new_window('删除此条', html, '取消');
            $("#newwind .center_popup").addClass("wid20");
            $('#newwind .center_button_div').prepend('<button class="default_btn edit_row_btn" onclick="Men.alert_ok()">删除</button>'); 
            $("#newwind .edit_row_btn").on("click",function(){
            treegrid.del_list_btn(data,row,url,td);            
            }); 
        },
         //删除按钮
        del_list_btn: function(data,row,url,td){
        	Tomd.wait('删除中...');
            if(url){
                //eval(td).row(row).remove().draw(false);            
                //后端删除
                var v = 1;
                $.ajax({
        			type : "post",
        			async:false,
        			url : url,
        			data : data,
        			success : function(s) {
        				v = s.code;
        				Tomd.toast('right', '', '删除成功');
        			},
        			error : function(e) {
        				console.error(e.message);
        			}
        		});
                Men.close_window();
                		if(v == 0)
                		{
                		treegrid.reset_treegrid();  
                		Tomd.waitok();
                		return true;}
                		else{
                			Tomd.waitok();
                			return false;
                		} 
                }
        },
        
      //增加子菜单按钮
        addmenu_btn: function(code){
            $("#parentCode").val(code);
        },
         //刷新treegrid
         reset_treegrid: function(){
             $("#tb").empty();             
             this.getTreeData();
             treegrid.create_treeTable();    
         },
         
       //系统分类
         sysList: function(){
        	 var data = {};
 			var datas = Men.get_data("../ume/sys/um/menu/sysList", data);
 			sys_data = datas;
  			var nou = "";
  			$.each(sys_data, function(index, value) {
  				nou += `<option value="${value.sysCode}">${value.sysName}</option>`;
  			});
  			$("#sysCode").html(nou);
         },
         //打开导入数据窗口
         import_menu_data: function(){
        	 var html=`<div class="col-12"><div class="text-right" style="margin-bottom:.5rem"><button class="default_btn" onclick="treegrid.downTemplate()">下载模板</button></div><input type="file" name="file" class="dropify-fr"
					data-default-file="" mulpiple /></div>`;
             Men.new_window('导入数据',html,'取消',treegrid.import_data_btn);
             $('.center_button_div').prepend('<button class="default_btn edit_row_btn" onclick="Men.alert_ok()">导入</button>');
             //初始化上传控件
             Men.dropify();
         },
         //导入数据窗口 导入按钮
         import_data_btn: function(){
            alert($("input[type='file']").val());
             Tomd.toast('','warning','导入成功！');
             Men.close_window(); 
         },
       //下载模板按钮
         downTemplate: function(){
             alert("下载模板");
         },
         //导出数据按钮
         export_menu_data: function(){
        	 alert("导出的数据已在打印窗口中！");
             var export_data = [];
             var trs = $("#tb").find("tr");
             $.each(trs, function(){
                 var chk = $(this).find("input[type='checkbox']");
                 if(chk.is(":checked"))
                     {
                         var kid = chk.attr("data-id");
                         $.each(treeData, function(index,value){
                             if(kid == value.menuCode)
                                 export_data.push(value);
                         });
                     }
             });
             console.log(export_data);
         },
       //增加角色按钮，弹出窗口
         addrole_btn: function(code, name){
             var html = $("#addrole_template").html();
             Men.new_window('添加角色',html,'取消',treegrid.create_role_btn);
             $('.center_button_div').prepend('<button class="default_btn edit_row_btn" onclick="Men.alert_ok()">创建</button>');
             $("#role_name").text(name);
             $("#role_id").text(code);
         },
         //创建角色按钮
         create_role_btn: function(){
        	 //ID名在此
        	 var menuCode = $("#role_id").text();
             var role_children = $(".create_role_div").find("input[type='checkbox']");
             var role_data = [];
             $.each(role_children, function(){
                 var obj = $(this);
                 if(obj.is(":checked")){
                     var obj_data = {};
                     obj_data.roleCode = obj.val();
                     //obj_data.name =obj.parent().text();
                     role_data.push(obj_data);
                 }
             });  
             var datas = {
            		 menuCode : menuCode,
            		 roles : JSON.stringify(role_data)
     			};
             
             
				$.ajax({
					method : "POST",
					url : "../ume/sys/um/menuAuthorization/saveMenuAuths",
					data : datas,
					success : function(data) {
						 if (data.code == 0) {
		                    alert("绑定成功！");
		                }
					}
				})
             Men.close_window();
         },
         //增加子菜单按钮
         addchildren_btn: function(code){
        	 $("#parentCode").val(code);
         },
        //自动运行
        init: function(){
        	this.sysList();
        	this.getTreeData();
            this.create_treeTable(); 
            Men.only_number();
        } 
     };    
    treegrid.init();
 //增加功能按钮
function trees(treeNode){
    var htmlStr = '';
    htmlStr +=`<button class="default_btn_small green_btn" title="修改" onclick="treegrid.editor_open('${treeNode.id}')"><i class="iconfont icon-bianji"></i>修改</button>`; 
    htmlStr +=`<button class="default_btn_small red_btn" title="删除" onclick="treegrid.del_btn('${treeNode.id}')"><i class="iconfont icon-shanchu"></i>删除</button>`; 
    htmlStr += `<button class="default_btn_small gray_btn" title="增加子菜单" onclick="treegrid.addchildren_btn('${treeNode.id}')"><i class="iconfont icon-guanli"></i>增加子菜单</button>`;
    htmlStr += `<button class="default_btn_small purple_btn" title="增加角色" onclick="treegrid.addrole_btn('${treeNode.id}', '${treeNode.menuName}')"><i class="iconfont icon-guanli"></i>增加角色</button>`;
    return htmlStr;
};

 

package com.moofen.cube.controller.ume.sys.um;

import java.util.HashMap;
import java.util.Map;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.moofen.core.entity.sys.um.Menu;
import com.moofen.cube.controller.base.BaseController;
import com.moofen.cube.service.ume.sys.um.MenuService;

@Controller
@RequestMapping("/ume/sys/um/menu")
public class MenuController extends BaseController{
	
	@Resource(name = "menuService")
	private MenuService menuService;
	
	@ResponseBody
	@GetMapping("/list")
	public JSONObject list(HttpServletRequest request) {
		return menuService.list();
	}

	@ResponseBody
	@GetMapping("/get")
	public JSONObject get(HttpServletRequest request) {
		Map<String, Object> params = new HashMap<String, Object>();
		params.put("code", request.getParameter("code"));
		return menuService.get(params);
	}	
	
	@ResponseBody
	@PostMapping("/create")
	public JSONObject create(Menu menu) {
		return menuService.create(JSON.toJSONString(menu));
	}
	
	
	@ResponseBody
	@PostMapping("/update")
	public JSONObject update(Menu menu) {
		return menuService.update(JSON.toJSONString(menu));
	}
	
	
	@ResponseBody
	@PostMapping("/delete")
	public JSONObject delete(HttpServletRequest request) {

		Map<String, Object> params = new HashMap<String, Object>();
		params.put("code", request.getParameter("id"));
		return menuService.delete(params);
	}
	
	@ResponseBody
	@GetMapping("/sysList")
	public JSONObject sysList(HttpServletRequest request) {
		return menuService.sysList();
	}

}

 

Fengyq0507
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJs4.1 treegrid CRUD 读取、新增、修改、删除
01-27
实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,acol){ this.editingPlugin.startEdit(node,acol); } //将grid更新为已保存状态(客户端) commit:function(records){ Ext.Array.each(records,function(record){ record.updateInfo(); record.commit(); }); } //刷新tree指定的的节点 store.load({node:node}); //异步Ajax提交新增数据 insertdb:function(newrecords) //异步Ajax提交修改数据 updatedb:function(updaterecords)
LayUI之树形权限菜单
liaozhixiangjava的博客
07-12 676
可以自定义每个节点的样式、图标、文本等内容，以及节点的展开和折叠操作。4.
knockoutjs + easyui.treegrid 可编辑的自定义绑定插件
君之蘭
11-20 9077
目前仅支持URL的CRUD。不需要的话可以却掉相关代码，把treegrid的data直接赋值给viewModel，然后用ko提交整个data 1、支持双击编辑 2、单击Cell，自动保存编辑。 3、4个功能按钮。   插件源码： ko.bindingHandlers.etreegrid = { editing: false, editIndex: 0, in
Jquery的树插件jqxTreeGrid的使用小结（实现基本的增删查改操作）
weixin_30755393的博客
10-27 441
一、引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery.js"></script> <script ...
Layui之动态树(树形菜单)详解
ChatYU的博客
07-12 2949
树形菜单的展示及编写，菜单栏的级别
jQuery中的val()方法
weixin_41049260的博客
09-21 2210
1.jQuery中的val()方法用来获取或设定输入框或选择框的值。 获取值：$("#text").val() 设置值：$("#text").val(“value”) 也可以来获取或设置select标签的值 <select id="select"> <option> select1 </option> <option> select2 &l...
pb9 datawindow treeview 树型结构
06-30
pb9 用datawindow 实现 treeview 树型结构
col-xs , col-sm , col-md , col-lg的理解
热门推荐
liyang_nash的专栏
07-23 14万+
转自:https://www.cnblogs.com/sdusrz/p/7170564.html 摘要: bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义： .col-xs- 超小屏幕 手机 (&lt;768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- ...
Bootstrap栅栏布局里col-xs-*、col-sm-*、col-md-*、col-lg-*之间的区别及使用方法
知行合一，跬步致远
03-24 7万+
概括 一句话概括，就是根据显示屏幕宽度的大小，自动的选用对应的类的样式。 关键字 1、col是column简写：列； 2、xs是maxsmall简写：超小， sm是small简写：小，  md是medium简写：中等， lg是large简写：大； 3、-* 表示占列数，即占每行row分12列栅格系统比； 4、.col-xs-* 超小屏幕如手机 （&lt;768px）时使用；     ...
jQuery EasyUI treegrid 增删改查 - 2
flash8627的专栏
07-10 5519
Edit Insert Delete <table id="tg" class="easyui-treegrid" title="Editable TreeGrid" style="width:700px;" data-options=" iconCls: 'icon-ok', rownumbers: true, animate: true, c
table实现的树状菜单
07-10
table实现的树状菜单，可用于系统的左边导航菜单，代码简单实用。
树形菜单的实现，有增删改查方法的实现。
04-16
java树形菜单的实现，有增删改查方法的实现。只用引入项目和建一个表就可以。
JS做的树形菜单,自定义添加节点
12-11
用纯JS写的树形菜单，界面美观，操作方便。可自定义添加节点，节点图标……
react-crud-table:包含所有CRUD操作的表
04-28
包含所有CRUD操作的表。 目录 组件属性 发展 贡献 执照 注释 介绍 内置的表，其中包括所有CRUD（创建，读取，更新，删除）操作。 特征 CRUD操作 分页 查询规则构建器以过滤项目。 单击列标题时，按给定属性对项目...
原生js实现针对Dom节点的CRUD操作示例
10-16
主要介绍了原生js实现针对Dom节点的CRUD操作,结合实例形式分析了javascript操作dom节点的创建、获取、增删改查等相关操作技巧,需要的朋友可以参考下
angular-mat-table-crud：角材料表的CRUD操作
01-31
该项目展示了我在Angular的Mat-Table上的CRUD（创建，读取，更新，删除）实现。 最重要的是，前端会根据操作进行相应的更新。 如果您正在使用来自后端（某些数据库，例如MySQL）的数据，这很重要，但是我想它也可以...
基于SSM框架的Java CRUD操作示例源码
最新发布
03-25
项目标题：基于SSM框架的Java CRUD操作演示源码 项目概述： 本项目采用Java作为主要开发语言，整合了CSS、JavaScript等前端技术，构建了一个基于SSM（Spring、SpringMVC、MyBatis）框架的CRUD（增删改查）操作示例...
material-table-crud:在material-ui表上执行CRUD
05-07
使用material-ui表对Restful API进行CRUD操作这是一个使用MATERIAL-TABLE库制作的示例用户管理应用程序。 我使用JSONPlaceholder API将USER数据填充到表中。 Material-Table对轻松地对表执行CRUD操作非常有帮助。 ...
JSON.toJSONString(实体类)和JSON.parseObject(String, xxx.class)和JSON.parseArray(JSONArray,xxx.class )
qq_24192465的博客
08-14 8073
/** * 新增学生 * * @param request * @return */ @ResponseBody @PostMapping("/create") public JSONObject create(HttpServletRequest request) { // 学生基本信息 Student student = new Student(); ...
MySQLCRUD操作
06-08
MySQL是一种关系型数据库，提供了多种方式进行CRUD操作。以下是MySQL CRUD操作的详细说明： 1. Create：新增数据 在MySQL中，可以使用INSERT语句向表中插入数据。例如： ```mysql INSERT INTO user (name, age) ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值