Vue.js实现简单动态数据处理


Posted in Javascript onFebruary 13, 2017

直接上代码吧

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
  <title>LibGoodsController测试页面</title>
  <meta name="layout" content="main"/>
  <script type="text/javascript" src="${resource(base: '..', dir: 'js', file: 'jquery-2.1.3.js')}"></script>
  <script type="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>
</head>

<body>
<div style="text-align: center" id="test_title">
  <font color="#ff1493" size="6">商品信息管理服务(web-service-libGoods)接口测试</font> <br><br><br>
</div>


<div id="object_crud">

  测试介绍:<br><br>
  <div class="description" style="height:auto;width:auto;border-top: 1px dashed #F00;
  border-bottom: 1px dashed #F00;border-left: 1px dashed #F00;border-right: 1px dashed #F00">
    1.条件查询并分页(查询条件:商品名称模糊查询,商品类别,分页参数)<br>
    2.新增商品<br>
    3.更新商品<br>
    4.删除商品<br>
    5.启用/停用商品
  </div><br><br>

  1.商品名称:<g:textField name="queryStr" id="queryStr1" value="佳能"></g:textField>
  商品类型 :
  <g:radio value="2" name="goodsTypeSearch"></g:radio>餐饮
  <g:radio value="1" name="goodsTypeSearch" checked="true"></g:radio>零售
  列表参数: 当前页:<g:textField name="page" value="0"></g:textField> 每页显示:<g:textField name="pageSize" value="20"></g:textField>
  <button v-on:click="showData">查询</button>
  <button v-on:click="showJSON">显示JSON</button>
  <br><br>

  测试结果JSON:<button v-on:click="clearJSON">清空测试结果</button>
  <br><br>
  <div class="jsonResult" style="height:auto;width:auto;border-top: 1px dashed #F00;
  border-bottom: 1px dashed #F00;border-left: 1px dashed #F00;border-right: 1px dashed #F00">
    {{message}}
  </div><br><br>

  测试列表:
  <br><br>
  <div style="height:auto;width:auto;border-top: 1px dashed #F00;
  border-bottom: 1px dashed #F00;border-left: 1px dashed #F00;border-right: 1px dashed #F00">
    <table id="table" style="border:2";>
      <thead>
      <tr>
        <th style='width:3%; text-align: left'>ID</th>
        <th style='width:10%; text-align: left'>商品编码</th>
        <th style='width:5%; text-align: left'>商品类别</th>
        <th style='width:10%; text-align: left'>商品名称</th>
        <th style='width:10%; text-align: left'>简称</th>
        <th style='width:5%; text-align: left'>是否审核</th>
        <th style='width:5%; text-align: left'>是否启用</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="data in list" v-on:click="onClick">
        <td>{{data.id}}</td>
        <td>{{data.barcode}}</td>
        <td>{{data.goodsType | goodsTypeFormatter}}</td>
        <td>{{data.name}}</td>
        <td>{{data.shortName}}</td>
        <td>{{data.isAudit | isAuditFormatter}}</td>
        <td>{{data.isEnabled | isEnabledFormatter}}</td>
      </tr>
      </tbody>
    </table>
  </div>

  <br><br>
  2.<button v-on:click="save">保存</button> <br><br>
  3.<button v-on:click="save">更新</button> <br><br>
  4.<button v-on:click="delete">删除</button> <br><br>
  5.<button v-on:click="enable">启用</button> 
  <button v-on:click="unEnable">停用</button>br><br>

  商品对象:
  <div class="z333" style="height:auto;width:auto;border-top: 1px dashed #F00;
  border-bottom: 1px dashed #F00;border-left: 1px dashed #F00;border-right: 1px dashed #F00"><br>
    <g:form name="myform">
      ID(测试启/停用,删除):<g:textField name="id" v-model="object.id"></g:textField><br><br>
      商品编码:<g:textField name="barcode" v-model="object.barcode"></g:textField><font color="red"> *</font><br><br>
      商品名称:<g:textField name="name" v-model="object.name"></g:textField><font color="red"> *</font><br><br>
      商品类别:<g:radio value="2" name="goodsType" v-model="object.goodsType"></g:radio>餐饮
      <g:radio value="1" name="goodsType" v-model="object.goodsType"></g:radio>零售<font color="red"> *</font><br><br>
      商品简称:<g:textField name="shortName" v-model="object.shortName"></g:textField><br><br>
      商品分类:<g:textField name="categoryName" v-model="object.categoryName"></g:textField><br><br>
      品牌编码:<g:textField name="brandCode" v-model="object.brandCode"></g:textField><br><br>
      产地:<g:textField name="productArea" v-model="object.productArea"></g:textField><br><br>
      单位:<g:textField name="unitName" v-model="object.unitName"></g:textField><br><br>
      规格:<g:textField name="goodsSpec" v-model="object.goodsSpec"></g:textField><br><br>
      拼音码:<g:textField name="pyCode" v-model="object.pyCode"></g:textField><br><br>
      备注:<g:textField name="remark" v-model="object.remark"></g:textField><br><br>
    </g:form>
  </div><br><br>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
vue组件name的作用小结
May 23 Javascript
JavaScript获取select中text值的方法
Feb 13 #Javascript
详谈$.data()的用法和作用
Feb 13 #Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 #Javascript
JavaScript实现公历转农历功能示例
Feb 13 #Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 #Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 #Javascript
JS中input表单隐藏域及其使用方法
Feb 13 #Javascript
You might like
PHP简介
2006/10/09 PHP
PHP图片上传代码
2013/11/04 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
javascript实现日历效果
2019/06/17 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
Python随机生成数模块random使用实例
2015/04/13 Python
Python 装饰器深入理解
2017/03/16 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
python高级特性简介
2020/08/13 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
一篇.NET面试题
2014/09/29 面试题
领导失职检讨书
2014/02/24 职场文书
实习护士自荐信
2014/06/21 职场文书
植树造林的宣传标语
2014/06/23 职场文书
校长师德表现自我评价
2015/03/04 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
音乐会主持人开场白
2015/05/28 职场文书
《1942》观后感
2015/06/08 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL