首页
所有分类
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 相关文章推荐
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
jquery选择器简述
Aug 31 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
Layui 解决表格异步调用后台分页的问题
Oct 26 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
监听(2) re模块(2) 项目打包(2) watch(1) vue-cli3.x(1) scss(1) vue-router-link(1) 事件调度器(1) sched(1) okenizer(1)
You might like
PHP MVC框架路由学习笔记
2016/03/02 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
一直复略了的一个问题，关于表单重复提交
2007/02/15 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
使用python实现tcp自动重连
2017/07/02 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
实例详解Python模块decimal
2019/06/26 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
学习Python爬虫的几点建议
2020/08/05 Python
固特异美国在线轮胎店：Goodyear Tire
2019/02/23 全球购物
酒吧副总经理岗位职责
2013/12/10 职场文书
入党思想汇报
2014/01/05 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
师德模范事迹材料
2014/06/03 职场文书
班主任自我评价范文
2015/03/11 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
行为习惯主题班会
2015/08/14 职场文书
田径运动会广播稿
2015/08/19 职场文书
PHP连接MSSQL数据库案例，PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
Python学习开发之图形用户界面详解
2021/08/23 Python
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python