Vue.js 表格查询与更新
2017-06-24 09:02
218 查看
Vue.js 实现表格数据绑定
可以利用vue.js生命周期事件created加载完后为表格提供数据
[javascript] view
plain copy
var vm = new Vue({
el: "#table_content",
data: {
ulist: []
},
methods: {
getdata: function (_keycontent) { //查询数据
//先把本地对象缓存下来
var self = this;
$.get("GetUsersHandler.ashx", { keycontent: _keycontent, page: currentPage }, function (_result) {
var jsobobj = JSON.parse(_result);
self.ulist = jsobobj;
});
}
},
created: function () { //初始化事件里边去调用查询方法
this.getdata("");
}
});
使用V-for解析数据
[html] view
plain copy
<tr v-for="uitem in ulist">
<td class="highlight">
<div class="success"></div>
<a href="#">{{uitem.Id}}</a>
</td>
<td class="hidden-phone">{{uitem.UserName}}</td>
<td>
<span class="label label-success">{{uitem.Number}}</span>
</td>
<td style="width: 200px">
<a href="#" class="btn mini purple"><i class="icon-edit"></i>更新</a>
<a href="#" class="btn mini black"><i class="icon-trash"></i>删除</a>
<a href="#" class="btn mini blue"><i class="icon-share"></i>分享</a>
</td>
</tr>
效果:
Vue.js实现更新
其实只要点击更新按钮能够拿到值就好操作了
方法1:拿到更新按钮本身,在通过jQuery去获取数据
[html] view
plain copy
<a href="#" class="btn mini purple" v-on:click="vupdate($event)"><i class="icon-edit"></i>更新</a>
[javascript] view
plain copy
methods: {
vupdate: function (_my) {
//***************获取数据的方法1,使用jquery获取*****************
var needtr = $(_my.target).parent().parent();
console.log(_my.target);
alert(needtr.find("td").eq(1).html());
alert(needtr.find("td").eq(2).html());
},
方法2:利用vue绑定的数据
点击更新按钮的时候把改行数据源直接传递到方法里边去
[html] view
plain copy
<a href="#" class="btn mini purple" v-on:click="vupdate(uitem)"><i class="icon-edit"></i>更新</a>
[javascript] view
plain copy
methods: {
vupdate: function (uitem) {
//***************获取数据的方法2,绑定的时候传递vue实例*****************
console.log(uitem);
alert(uitem.UserName);
alert(uitem.Number);
alert(uitem.Class);
alert(uitem.Id);
},
可以利用vue.js生命周期事件created加载完后为表格提供数据
[javascript] view
plain copy
var vm = new Vue({
el: "#table_content",
data: {
ulist: []
},
methods: {
getdata: function (_keycontent) { //查询数据
//先把本地对象缓存下来
var self = this;
$.get("GetUsersHandler.ashx", { keycontent: _keycontent, page: currentPage }, function (_result) {
var jsobobj = JSON.parse(_result);
self.ulist = jsobobj;
});
}
},
created: function () { //初始化事件里边去调用查询方法
this.getdata("");
}
});
使用V-for解析数据
[html] view
plain copy
<tr v-for="uitem in ulist">
<td class="highlight">
<div class="success"></div>
<a href="#">{{uitem.Id}}</a>
</td>
<td class="hidden-phone">{{uitem.UserName}}</td>
<td>
<span class="label label-success">{{uitem.Number}}</span>
</td>
<td style="width: 200px">
<a href="#" class="btn mini purple"><i class="icon-edit"></i>更新</a>
<a href="#" class="btn mini black"><i class="icon-trash"></i>删除</a>
<a href="#" class="btn mini blue"><i class="icon-share"></i>分享</a>
</td>
</tr>
效果:
Vue.js实现更新
其实只要点击更新按钮能够拿到值就好操作了
方法1:拿到更新按钮本身,在通过jQuery去获取数据
[html] view
plain copy
<a href="#" class="btn mini purple" v-on:click="vupdate($event)"><i class="icon-edit"></i>更新</a>
[javascript] view
plain copy
methods: {
vupdate: function (_my) {
//***************获取数据的方法1,使用jquery获取*****************
var needtr = $(_my.target).parent().parent();
console.log(_my.target);
alert(needtr.find("td").eq(1).html());
alert(needtr.find("td").eq(2).html());
},
方法2:利用vue绑定的数据
点击更新按钮的时候把改行数据源直接传递到方法里边去
[html] view
plain copy
<a href="#" class="btn mini purple" v-on:click="vupdate(uitem)"><i class="icon-edit"></i>更新</a>
[javascript] view
plain copy
methods: {
vupdate: function (uitem) {
//***************获取数据的方法2,绑定的时候传递vue实例*****************
console.log(uitem);
alert(uitem.UserName);
alert(uitem.Number);
alert(uitem.Class);
alert(uitem.Id);
},
相关文章推荐
- Vue.js 表格查询与更新
- Vue.js+Layer表格数据绑定与实现更新
- Vue.js+Layer表格数据绑定与实现更新
- Vue.js+Layer表格数据绑定与实现更新的实例
- Vue.js+Layer表格数据绑定与实现更新
- 【软件周刊】JetBrains 为 .NET 推出 Rider;Vue.js 要当版本帝?And 开源中国安卓客户端更新啦!
- 关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
- vue.js表格组件开发的实例详解
- vue.js实现成绩查询、新增、修改
- 基于Vue.js的表格分页组件
- Vue.js 2.0更新之增加Virtual DOM讲解
- Flask MVVM 开发(vue.js) - ajax如何同步更新地址栏history 以及使用浏览器返回按钮
- Vue.js的表格分页组件
- vue.js 2.0项目遇到的问题整理(持续更新中)
- vue.js+Element实现表格里的增删改查
- vue.js实现表格合并示例代码
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
- Vue.js的表格分页组件
- vue.js通过自定义指令实现数据拉取更新的实现方法
- 关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库