【www.bbyears.com--js教程】
代码如下
<%@ page contentType="text/html;charset=UTF-8" %>
<scripttype="text/javascript"src="${resource(base: '..', dir: 'js', file: 'jquery-2.1.3.js')}"></script>
<scripttype="text/javascript"src="${resource(base: '..', dir: 'js', file: 'vue.min.js')}"></script>
<script>
$(function() {
//列表选中ID
var tableSelectId;
//列表选中tr
var selTr = null;
//列表JSON
var printjson;
//初始化过滤器
Vue.filter('isAuditFormatter', function (value) {
if(value == true){
return "已审核";
}
else return "未审核";
});
Vue.filter('isEnabledFormatter',function (value){
if(value == true){
return "启用";
}
else return "停用";
});
Vue.filter('goodsTypeFormatter',function (value){
if(value == "1"){
return "零售";
}
else return "餐饮";
});
var OBJECT_CRUD = new Vue({
el: '#object_crud',
data: {
//显示JSON
message:'',
//对象
object : '',
//对象数组
list : ''
},
methods: {
//分页查询并显示数据
showData: function () {
var _self = this;
var url = "...";
$.ajax({
type: 'GET',
url: url,
success:function(data) {
printjson = JSON.stringify(data);
_self.list = data.data.rows;
}
});
},
//显示查询JSON
showJSON:function(){
this.message = printjson;
},
//清空查询返回JSON
clearJSON:function(){
this.message = "";
},
//选中列表行 点击事件
onClick:function (evt) {
var _self = this;
var el = evt.srcElement?evt.srcElement:evt.target;
if(el.tagName.toUpperCase() !="TD") return;
var tr = el.parentNode;
tr.style.backgroundColor="yellow";
if(selTr !=null)
{
selTr.style.backgroundColor ="white";
}
selTr = tr;
tableSelectId = selTr.cells[0].innerHTML;
//通过ID获取对象
var url = "...";
$.ajax({
type: 'GET',
url: url,
success:function(data) {
if(data.result == "true"){
_self.object = data.data;
}
}
});
},
//启用 选中的 记录
enable:function(){
var _self = this;
var url = "...";
$.ajax({
type: 'GET',
url: url,
success:function(data) {
_self.message = JSON.stringify(data);
if(data.result == "true"){
_self.showData();
}
}
});
},
//停用 选中的 记录
unEnable:function(){
var _self = this;
var url = "...";
$.ajax({
type: 'GET',
url: url,
success:function(data) {
_self.message = JSON.stringify(data);
if(data.result == "true"){
_self.showData();
}
}
});
},
//删除 记录
delete:function(){
var _self = this;
var url = "...";
$.ajax({
type: 'GET',
url: url,
success:function(data) {
_self.message = JSON.stringify(data);
if(data.result == "true") {
_self.showData();
}
}
});
},
save:function(){
var _self = this;
var url = "...";
$.ajax({
type: 'POST',
url: url,
data:{
id:$('#id').val()
/*...*/
},
success:function(data) {
_self.message = JSON.stringify(data);
if(data.result == "true"){
_self.showData();
}
}
});
}
}
})
});
</script>
测试介绍：
border-bottom: 1px dashed #F00;border-left: 1px dashed #F00;border-right: 1px dashed #F00">
1.条件查询并分页（查询条件：商品名称模糊查询，商品类别，分页参数）
2.新增商品
3.更新商品
4.删除商品
5.启用/停用商品
1.商品名称:
商品类型 :
列表参数： 当前页：
测试结果JSON：
border-bottom: 1px dashed #F00;border-left: 1px dashed #F00;border-right: 1px dashed #F00">
{{message}}
测试列表：
border-bottom: 1px dashed #F00;border-left: 1px dashed #F00;border-right: 1px dashed #F00">
{{data.id}}
{{data.barcode}}
{{data.goodsType | goodsTypeFormatter}}
{{data.name}}
{{data.shortName}}
{{data.isAudit | isAuditFormatter}}
{{data.isEnabled | isEnabledFormatter}}
2.
3.
4.
5.
商品对象：
border-bottom: 1px dashed #F00;border-left: 1px dashed #F00;border-right: 1px dashed #F00">
ID（测试启/停用，删除）：
商品编码：
商品名称：
商品类别：
商品简称：
商品分类：
品牌编码：
产地：
单位：
规格：
拼音码：
备注：