首页
所有分类
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 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
JavaScript 匿名函数（anonymous function）与闭包（closure）
Oct 04 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
ICF-903L(1) 根德5570(1) 239军机(1) YAESU(1) frg-100(1) YB-230(1) BCLer(1) 74HC4066(1) AN-LP1(1) DE1103(2)
You might like
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
Use Word to Search for Files
2007/06/15 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
浅述python中深浅拷贝原理
2018/09/18 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
Python远程linux执行命令实现
2020/11/11 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
办公室文秘自我鉴定
2013/09/21 职场文书
计算机系毕业生推荐信
2013/11/06 职场文书
青春演讲稿范文
2014/05/08 职场文书
监督检查工作方案
2014/05/28 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
先进基层党组织材料
2014/12/25 职场文书
服务明星事迹材料
2014/12/29 职场文书
幼师辞职信范文
2015/02/27 职场文书
小平您好观后感
2015/06/09 职场文书
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL