Vue.js系列教材（十七）- 用 Vue.js 做一套增删改查 CRUD

CRUD 这个东西还是绕不过去的，毕竟业务上太常见了。
接下来会用 VUE.js 做一套 CRUD。不过这个 CRUD，是仅仅前端的，并没有和服务端交互。
需要看 VUE.js 和服务端交互的CRUD教程，请点击: VUE.JS + RESTFUL + PAGEHELPER + THYMELEAF + SPRINGBOOT 前后端分离 CRUD 教程

直接操作就可以看到 CRUD 的效果了

代码行数较多，请点击查看

<html>
<head>
    <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
        	border:1px solid gray;
        }
        
        table{
        	border-collapse:collapse;
        }
	
		div#app{
			margin:20px auto;
			width:400px;
			padding:20px;
		}        
    </style>
</head>

<body>
    <div id="app">
            <table id="heroListTable" >
                <thead>
                    <tr>
                        <th>英雄名称</th>
                        <th>血量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="hero in heros ">
                    	<td>{{hero.name}}</td>
                    	<td>{{hero.hp}}</td>
                    	<td>
                    		<a href="#nowhere" @click="edit(hero)">编辑</a>
                    		<a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
                    	</td>
                    </tr>
                    <tr>
                    	<td colspan="3">
                    		英雄名称:
	                        <input type="text"    v-model="hero4Add.name" />
	                        <br>
							血量：
	                        <input type="number"    v-model="hero4Add.hp" />
	                        <br>
	                        <button type="button"  v-on:click="add">增加</button>   
	                     </td>                 	
                    </tr>
                </tbody>
            </table>
            
            <div id="div4Update">
            
                    		英雄名称:
	                        <input type="text"    v-model="hero4Update.name" />
	                        <br>
							血量：
	                        <input type="number"    v-model="hero4Update.hp" />	                      
	                        <input type="hidden"    v-model="hero4Update.id" />	                      
	                        <br>
	                        <button type="button"  v-on:click="update">修改</button>              	
	                        <button type="button"  v-on:click="cancel">取消</button>              	
            
            </div>
    </div>

    <script type="text/javascript">
    	//修改区域隐藏起来先
    	$("#div4Update").hide();

        //Model
        var data = {
            heros: [
            { id: 1, name: '盖伦', hp: 318},
            { id: 2, name: '提莫', hp: 320},
            { id: 3, name: '安妮', hp: 419},
            { id: 4, name: '死歌', hp: 325},
            { id: 5, name: '米波', hp: 422},
            ],
            hero4Add: { id: 0, name: '', hp: '0'},
            hero4Update: { id: 0, name: '', hp: '0'}
        };
        
    	//用于记录最大id值
    	var maxId = 5;
    	//计算最大值	
        for (var i=0;i<data.heros.length;i++){
            if (data.heros[i].id > maxId) 
            	maxId=  this.heros[i].id;
        }        
        
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
            add: function (event) {
            	//获取最大id
            	maxId++;
                //赋予新id
				this.hero4Add.id = maxId;
                if(this.hero4Add.name.length==0)
                	this.hero4Add.name = "Hero#"+this.hero4Add.id;
                //把对象加入到数组
                this.heros.push(this.hero4Add);
                //让 hero4Add 指向新的对象
                this.hero4Add = { id: 0, name: '', hp: '0'}
            },
            deleteHero: function (id) {
            	console.log("id"+id);
                for (var i=0;i<this.heros.length;i++){
                    if (this.heros[i].id == id) {
                        this.heros.splice(i, 1);
                        break;
                    }
                }
            },
            edit: function (hero) {
            	$("#heroListTable").hide();
            	$("#div4Update").show();
                this.hero4Update = hero;
            },
            update:function(){
            	//因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
            	$("#heroListTable").show();
            	$("#div4Update").hide();           	
            },
            cancel:function(){
            	//其实就是恢复显示
            	$("#heroListTable").show();
            	$("#div4Update").hide();
            }
        }
    });
    </script>
<div style="height:300px"></div>
</body>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<html>
<head>
    <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
        	border:1px solid gray;
        }
        
        table{
        	border-collapse:collapse;
        }
	
		div#app{
			margin:20px auto;
			width:400px;
			padding:20px;
		}        
    </style>
</head>

//Model
        var data = {
            heros: [
            { id: 1, name: '盖伦', hp: 318},
            { id: 2, name: '提莫', hp: 320},
            { id: 3, name: '安妮', hp: 419},
            { id: 4, name: '死歌', hp: 325},
            { id: 5, name: '米波', hp: 422},
            ],
            hero4Add: { id: 0, name: '', hp: '0'},
            hero4Update: { id: 0, name: '', hp: '0'}
        };
        
    	//用于记录最大id值
    	var maxId = 5;
    	//计算最大值	
        for (var i=0;i<data.heros.length;i++){
            if (data.heros[i].id > maxId) 
            	maxId=  this.heros[i].id;
        }        
        
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
            add: function (event) {
            	//获取最大id
            	maxId++;
                //赋予新id
				this.hero4Add.id = maxId;
                if(this.hero4Add.name.length==0)
                	this.hero4Add.name = "Hero#"+this.hero4Add.id;
                //把对象加入到数组
                this.heros.push(this.hero4Add);
                //让 hero4Add 指向新的对象
                this.hero4Add = { id: 0, name: '', hp: '0'}
            },
            deleteHero: function (id) {
            	console.log("id"+id);
                for (var i=0;i<this.heros.length;i++){
                    if (this.heros[i].id == id) {
                        this.heros.splice(i, 1);
                        break;
                    }
                }
            },
            edit: function (hero) {
            	$("#heroListTable").hide();
            	$("#div4Update").show();
                this.hero4Update = hero;
            },
            update:function(){
            	//因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
            	$("#heroListTable").show();
            	$("#div4Update").hide();           	
            },
            cancel:function(){
            	//其实就是恢复显示
            	$("#heroListTable").show();
            	$("#div4Update").hide();
            }
        }
    });
    </script>
<div style="height:300px"></div>
</body>
</html>

渲染中渲染完成

效果

接下来，就按照查询，增加，删除，编辑和更新，由浅入深地把这个 CRUD 一点点做出来。

查询很简单，和前面的循环语句教程内容一样，没什么区别

运行效果

代码行数较多，请点击查看

<html>
<head>
    <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
        	border:1px solid gray;
        }
        
        table{
        	border-collapse:collapse;
        }
	
		div#app{
			margin:20px auto;
			width:400px;
			padding:20px;
		}        
    </style>
</head>

<body>
    <div id="app">
            <table id="heroListTable" >
                <thead>
                    <tr>
                        <th>英雄名称</th>
                        <th>血量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="hero in heros ">
                    	<td>{{hero.name}}</td>
                    	<td>{{hero.hp}}</td>
                    </tr>
                </tbody>
            </table>
            
    </div>

<script type="text/javascript">
	//Model
	var data = {
	    heros: [
	    { id: 1, name: '盖伦', hp: 318},
	    { id: 2, name: '提莫', hp: 320},
	    { id: 3, name: '安妮', hp: 419},
	    { id: 4, name: '死歌', hp: 325},
	    { id: 5, name: '米波', hp: 422},
	    ],
	    hero4Add: { id: 0, name: '', hp: '0'},
	    hero4Update: { id: 0, name: '', hp: '0'}
	};
        
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data
    });
</script>
</body>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<html>
<head>
    <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
        	border:1px solid gray;
        }
        
        table{
        	border-collapse:collapse;
        }
	
		div#app{
			margin:20px auto;
			width:400px;
			padding:20px;
		}        
    </style>
</head>

渲染中渲染完成

效果

接着就是增加功能
1. 准备输入框

输入组件都和 hero4Add 对象通过 v-model 进行了双向绑定。
增加按钮也监听了 add 函数

2. maxId

//用于记录最大id值
var maxId = 5;
//计算最大值
for (var i=0;i<data.heros.length;i++){
if (data.heros[i].id > maxId)
maxId= this.heros[i].id;
}

准备了 maxId，作为自增长键，初始值取当前数据的最大id.

3. add函数

methods: {
add: function (event) {
//获取最大id
maxId++;
//赋予新id
this.hero4Add.id = maxId;
if(this.hero4Add.name.length==0)
this.hero4Add.name = "Hero#"+this.hero4Add.id;
//把对象加入到数组
this.heros.push(this.hero4Add);
//让 hero4Add 指向新的对象
this.hero4Add = { id: 0, name: '', hp: '0'}
}
}

运行效果

代码行数较多，请点击查看

<html>
<head>
    <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
        	border:1px solid gray;
        }
        
        table{
        	border-collapse:collapse;
        }
	
		div#app{
			margin:20px auto;
			width:400px;
			padding:20px;
		}        
    </style>
</head>

<body>
    <div id="app">
            <table id="heroListTable" >
                <thead>
                    <tr>
                        <th>英雄名称</th>
                        <th>血量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="hero in heros ">
                    	<td>{{hero.name}}</td>
                    	<td>{{hero.hp}}</td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            英雄名称:
                            <input type="text"    v-model="hero4Add.name" />
                            <br>
                            血量：
                            <input type="number"    v-model="hero4Add.hp" />
                            <br>
                            <button type="button"  v-on:click="add">增加</button>  
                         </td>                   
                    </tr>                    
                </tbody>
            </table>
            
    </div>

<script type="text/javascript">
	//Model
	var data = {
	    heros: [
	    { id: 1, name: '盖伦', hp: 318},
	    { id: 2, name: '提莫', hp: 320},
	    { id: 3, name: '安妮', hp: 419},
	    { id: 4, name: '死歌', hp: 325},
	    { id: 5, name: '米波', hp: 422},
	    ],
	    hero4Add: { id: 0, name: '', hp: '0'},
	    hero4Update: { id: 0, name: '', hp: '0'}
	};
        
    //用于记录最大id值
    var maxId = 5;
    //计算最大值
    for (var i=0;i<data.heros.length;i++){
        if (data.heros[i].id > maxId)
            maxId=  this.heros[i].id;
    }   	
        
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
            add: function (event) {
                //获取最大id
                maxId++;
                //赋予新id
                this.hero4Add.id = maxId;
                if(this.hero4Add.name.length==0)
                    this.hero4Add.name = "Hero#"+this.hero4Add.id;
                //把对象加入到数组
                this.heros.push(this.hero4Add);
                //让 hero4Add 指向新的对象
                this.hero4Add = { id: 0, name: '', hp: '0'}
            }
        }        
    });
    
</script>
</body>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<html>
<head>
    <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
        	border:1px solid gray;
        }
        
        table{
        	border-collapse:collapse;
        }
	
		div#app{
			margin:20px auto;
			width:400px;
			padding:20px;
		}        
    </style>
</head>

渲染中渲染完成

效果

1. 增加删除的链接

2. 增加 deleteHero 函数，逻辑很简单，就是遍历所有的hero对象，如果id相同，就删掉。

deleteHero: function (id) {
for (var i=0;i<this.heros.length;i++){
if (this.heros[i].id == id) {
this.heros.splice(i, 1);
break;
}
}
}

注: 方法名是 deleteHero 而不是 delete, 因为 delete 是关键字。。。这个坑

运行效果

代码行数较多，请点击查看

<html>
<head>
    <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
        	border:1px solid gray;
        }
        
        table{
        	border-collapse:collapse;
        }
	
		div#app{
			margin:20px auto;
			width:400px;
			padding:20px;
		}        
    </style>
</head>

<body>
    <div id="app">
            <table id="heroListTable" >
                <thead>
                    <tr>
                        <th>英雄名称</th>
                        <th>血量</th>
                        <th>操作</th>                        
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="hero in heros ">
                    	<td>{{hero.name}}</td>
                    	<td>{{hero.hp}}</td>
                        <td>
                            <a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
                        </td>                    	
                    </tr>
                    <tr>
						<td colspan="3">
						英雄名称:
						<input type="text"    v-model="hero4Add.name" />
						<br>
						血量：
						<input type="number"    v-model="hero4Add.hp" />
						<br>
						<button type="button"  v-on:click="add">增加</button>  
						</td>                   
                    </tr>                    
                </tbody>
            </table>
            
    </div>

<script type="text/javascript">
	//Model
	var data = {
	    heros: [
	    { id: 1, name: '盖伦', hp: 318},
	    { id: 2, name: '提莫', hp: 320},
	    { id: 3, name: '安妮', hp: 419},
	    { id: 4, name: '死歌', hp: 325},
	    { id: 5, name: '米波', hp: 422},
	    ],
	    hero4Add: { id: 0, name: '', hp: '0'},
	    hero4Update: { id: 0, name: '', hp: '0'}
	};
        
	//用于记录最大id值
	var maxId = 5;
	//计算最大值
	for (var i=0;i<data.heros.length;i++){
	    if (data.heros[i].id > maxId)
	        maxId=  this.heros[i].id;
	}   	
	        
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
		methods: {
		    add: function (event) {
		        //获取最大id
		        maxId++;
		        //赋予新id
		        this.hero4Add.id = maxId;
		        if(this.hero4Add.name.length==0)
		            this.hero4Add.name = "Hero#"+this.hero4Add.id;
		        //把对象加入到数组
		        this.heros.push(this.hero4Add);
		        //让 hero4Add 指向新的对象
		        this.hero4Add = { id: 0, name: '', hp: '0'}
		    },
            deleteHero: function (id) {
                console.log("id"+id);
                for (var i=0;i<this.heros.length;i++){
                    if (this.heros[i].id == id) {
                        this.heros.splice(i, 1);
                        break;
                    }
                }
            }		    
}        
    });
    
</script>
</body>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<html>
<head>
    <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
        	border:1px solid gray;
        }
        
        table{
        	border-collapse:collapse;
        }
	
		div#app{
			margin:20px auto;
			width:400px;
			padding:20px;
		}        
    </style>
</head>

渲染中渲染完成

效果

1. 增加链接

2. 增加用于编辑的 div

3. 增加相关函数

edit: function (hero) {
$("#heroListTable").hide();
$("#div4Update").show();
this.hero4Update = hero;
},
update:function(){
//因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
$("#heroListTable").show();
$("#div4Update").hide();
},
cancel:function(){
//其实就是恢复显示
$("#heroListTable").show();
$("#div4Update").hide();
}

运行效果

代码行数较多，请点击查看

<html>
<head>
    <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
            border:1px solid gray;
        }
         
        table{
            border-collapse:collapse;
        }
     
        div#app{
            margin:20px auto;
            width:400px;
            padding:20px;
        }       
    </style>
</head>
 
<body>
    <div id="app">
            <table id="heroListTable" >
                <thead>
                    <tr>
                        <th>英雄名称</th>
                        <th>血量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="hero in heros ">
                        <td>{{hero.name}}</td>
                        <td>{{hero.hp}}</td>
                        <td>
                            <a href="#nowhere" @click="edit(hero)">编辑</a>
                            <a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            英雄名称:
                            <input type="text"    v-model="hero4Add.name" />
                            <br>
                            血量：
                            <input type="number"    v-model="hero4Add.hp" />
                            <br>
                            <button type="button"  v-on:click="add">增加</button>  
                         </td>                   
                    </tr>
                </tbody>
            </table>
             
            <div id="div4Update">
             
                            英雄名称:
                            <input type="text"    v-model="hero4Update.name" />
                            <br>
                            血量：
                            <input type="number"    v-model="hero4Update.hp" />                        
                            <input type="hidden"    v-model="hero4Update.id" />                        
                            <br>
                            <button type="button"  v-on:click="update">修改</button>                 
                            <button type="button"  v-on:click="cancel">取消</button>                 
             
            </div>
    </div>
 
    <script type="text/javascript">
        //修改区域隐藏起来先
        $("#div4Update").hide();
 
        //Model
        var data = {
            heros: [
            { id: 1, name: '盖伦', hp: 318},
            { id: 2, name: '提莫', hp: 320},
            { id: 3, name: '安妮', hp: 419},
            { id: 4, name: '死歌', hp: 325},
            { id: 5, name: '米波', hp: 422},
            ],
            hero4Add: { id: 0, name: '', hp: '0'},
            hero4Update: { id: 0, name: '', hp: '0'}
        };
         
        //用于记录最大id值
        var maxId = 5;
        //计算最大值
        for (var i=0;i<data.heros.length;i++){
            if (data.heros[i].id > maxId)
                maxId=  this.heros[i].id;
        }       
         
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
            add: function (event) {
                //获取最大id
                maxId++;
                //赋予新id
                this.hero4Add.id = maxId;
                if(this.hero4Add.name.length==0)
                    this.hero4Add.name = "Hero#"+this.hero4Add.id;
                //把对象加入到数组
                this.heros.push(this.hero4Add);
                //让 hero4Add 指向新的对象
                this.hero4Add = { id: 0, name: '', hp: '0'}
            },
            deleteHero: function (id) {
                console.log("id"+id);
                for (var i=0;i<this.heros.length;i++){
                    if (this.heros[i].id == id) {
                        this.heros.splice(i, 1);
                        break;
                    }
                }
            },
            edit: function (hero) {
                $("#heroListTable").hide();
                $("#div4Update").show();
                this.hero4Update = hero;
            },
            update:function(){
                //因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
                $("#heroListTable").show();
                $("#div4Update").hide();           
            },
            cancel:function(){
                //其实就是恢复显示
                $("#heroListTable").show();
                $("#div4Update").hide();
            }
        }
    });
    </script>
<div style="height:300px"></div>
</body>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<html>
<head>
    <script src="https://how2j.cn/study../../../js/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://how2j.cn/study/vue.min.js"></script>
    <style type="text/css">
        td{
            border:1px solid gray;
        }
         
        table{
            border-collapse:collapse;
        }
     
        div#app{
            margin:20px auto;
            width:400px;
            padding:20px;
        }       
    </style>
</head>
 
<body>
    <div id="app">
            <table id="heroListTable" >
                <thead>
                    <tr>
                        <th>英雄名称</th>
                        <th>血量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="hero in heros ">
                        <td>{{hero.name}}</td>
                        <td>{{hero.hp}}</td>
                        <td>
                            <a href="#nowhere" @click="edit(hero)">编辑</a>
                            <a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            英雄名称:
                            <input type="text"    v-model="hero4Add.name" />
                            <br>
                            血量：
                            <input type="number"    v-model="hero4Add.hp" />
                            <br>
                            <button type="button"  v-on:click="add">增加</button>  
                         </td>                   
                    </tr>
                </tbody>
            </table>
             
            <div id="div4Update">
             
                            英雄名称:
                            <input type="text"    v-model="hero4Update.name" />
                            <br>
                            血量：
                            <input type="number"    v-model="hero4Update.hp" />                        
                            <input type="hidden"    v-model="hero4Update.id" />                        
                            <br>
                            <button type="button"  v-on:click="update">修改</button>                 
                            <button type="button"  v-on:click="cancel">取消</button>                 
             
            </div>
    </div>
 
    <script type="text/javascript">
        //修改区域隐藏起来先
        $("#div4Update").hide();
 
        //Model
        var data = {
            heros: [
            { id: 1, name: '盖伦', hp: 318},
            { id: 2, name: '提莫', hp: 320},
            { id: 3, name: '安妮', hp: 419},
            { id: 4, name: '死歌', hp: 325},
            { id: 5, name: '米波', hp: 422},
            ],
            hero4Add: { id: 0, name: '', hp: '0'},
            hero4Update: { id: 0, name: '', hp: '0'}
        };
         
        //用于记录最大id值
        var maxId = 5;
        //计算最大值
        for (var i=0;i<data.heros.length;i++){
            if (data.heros[i].id > maxId)
                maxId=  this.heros[i].id;
        }       
         
    //ViewModel
    var vue = new Vue({
        el: '#app',
        data: data,
        methods: {
            add: function (event) {
                //获取最大id
                maxId++;
                //赋予新id
                this.hero4Add.id = maxId;
                if(this.hero4Add.name.length==0)
                    this.hero4Add.name = "Hero#"+this.hero4Add.id;
                //把对象加入到数组
                this.heros.push(this.hero4Add);
                //让 hero4Add 指向新的对象
                this.hero4Add = { id: 0, name: '', hp: '0'}
            },
            deleteHero: function (id) {
                console.log("id"+id);
                for (var i=0;i<this.heros.length;i++){
                    if (this.heros[i].id == id) {
                        this.heros.splice(i, 1);
                        break;
                    }
                }
            },
            edit: function (hero) {
                $("#heroListTable").hide();
                $("#div4Update").show();
                this.hero4Update = hero;
            },
            update:function(){
                //因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
                $("#heroListTable").show();
                $("#div4Update").hide();           
            },
            cancel:function(){
                //其实就是恢复显示
                $("#heroListTable").show();
                $("#div4Update").hide();
            }
        }
    });
    </script>
<div style="height:300px"></div>
</body>
</html>

渲染中渲染完成

效果

CRUD

效果

分解动作

查询

增加

删除

编辑和更新