首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

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

- Author -

coding_forever

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
JavaScript实现PC端横向轮播图
Feb 07 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
dict(1) Vite(1) expdp(1) 外键约束(1) 数据备份(2) 云服务器(1) Foreign Key(1) hook(1) 腾讯云(1) JDK(1)
You might like
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾（入栈）
2011/07/12 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
javascript Function函数理解与实战
2017/12/01 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态（懒）加载模块和依赖
2018/11/25 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python求crc32值的方法
2014/10/05 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python 对key为时间的dict排序方法
2018/10/17 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
python中实现栈的三种方法
2020/12/19 Python
安卓程序员求职信
2014/02/28 职场文书
单位委托书范本
2014/04/04 职场文书
小浪底导游词
2015/02/12 职场文书
合作与交流自我评价
2015/03/09 职场文书
社区国庆节活动总结
2015/03/23 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP