Vue开发学习笔记:(一)、实现KendoUIGrid数据查询展示

原创 于 2020-12-24 14:13:54 发布 · 836 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #WebService #KendoUI #Grid #数据查询展示

本文详细介绍了如何在Vue应用中使用Kendo Grid进行初始数据查询，并实现带条件的动态查询。展示了如何设置列宽、绑定数据源及自定义列格式，同时涵盖了如何处理日期格式和通过事件触发的搜索功能。

 参考学习:https://www.cnblogs.com/wjx-blog/p/8400423.html

1.初始数据查询完整代码 

<template>
  <div>
    <!-- resizable:设置列宽可以调整 -->
    <!-- data-source:绑定数据源 -->
    <!-- columns:绑定自定义列集合 -->
    <kendo-grid
      :data-source="dataTable"
      :resizable="true"
      :columns="columns"
    ></kendo-grid>
  </div>
</template>

<script>
import { Grid, GridColumn } from "@progress/kendo-grid-vue-wrapper";
import { KendoDataSource } from "@progress/kendo-datasource-vue-wrapper";
import $ from "jquery";

//全局变量
var self;

export default {
  components: {
    "kendo-grid": Grid,
    "kendo-gridcolumn": GridColumn,
    "kendo-dataSource": KendoDataSource,
  },
  data: function () {
    return {
      dataTable: {
        transport: {
          //read:初始加载
          read: {
            type: "post",
            url: "http://localhost:2681//PXWebService.asmx/CallService", //测试链接
            data: { serviceName: "sm01_inq", parameters: "" }, //传入参数
            dataType: "json",
          },
        },
        schema: {
          model: {
            id: "USER_ID", //设置主键
            fields: { REC_CREATE_TIME: { type: "date" } }, //设置字段类型
          },
          data: function (response) {
            //transport中请求返回的结果会在此返回
            var datas = response;
            var returnTable = [];
            datas.forEach((item) => {
              //如果直接在此处使用return,代码会执行两次,第二次会将返回值清空
              // returnTable = item.Table1;
              //调用数据类型转换方法(设置数据格式)
              returnTable=self.SetColumnDataType(item.Table1, "DateTime", [
                "REC_CREATE_TIME",
              ]);
            });
            return returnTable;
          },
        },
      },
      //自定义列集合,页面只显示需要列
      columns: [
        // field:列名,title:列标题,format:数据掩码格式
        { field: "USER_ID", title: "用户ID" },
        { field: "USER_CODE", title: "用户账号" },
        { field: "USER_PWD", title: "用户密码" },
        { field: "USER_NAME", title: "用户姓名" },
        { field: "REC_CREATOR", title: "记录创建人" },
        {
          field: "REC_CREATE_TIME",
          title: "记录创建时间",
          format: "{0:yyyy-MM-dd HH:mm:ss}",
        },
      ],
    };
  },
  created: function (serviceName, parameters) {
    self = this;
    // $.ajax({
    //   type: "post",
    //   url: "http://localhost:2681//PXWebService.asmx/CallService", //测试链接
    //   data: { serviceName: "sm01_inq", parameters: "" }, //传入参数
    //   dataType: "json",
    //   success: function (response) {
    //     var datas = response;
    //     datas.forEach((item) => {
    //       // this.dataTable.data=item.Table1;
    //       self.dataTable.data(item.Table1);
    //     });
    //   },
    //   error: function (ex) {
    //     alert(ex.responseText);
    //   },
    // });
  },
  methods: {
    SetColumnDataType: function (DataTable, DataType, Columns) {

      //如果是时间类型则需要将纯字符串(不带特殊符号)转为带符号的
      //否则Grid设置时间类型的格式无效,以下方法待优化
      if (DataType === "DateTime") {
        DataTable.forEach((row) => {
          var colName = Columns[0];
          var temp = row[Columns[0]];
          var length=row[Columns[0]].length;
          var year='';
          var month='';
          var day='';
          var hour='';
          var minute='';
          var seconds='';

          //substr(2,4):substr的第一个参数是第几位,而不是索引
          //2:代表从第二位开始截取不包括第二位
          //4:代表截取4个字符

          if(row[Columns[0]].length===6)//yyyyMM
          {
            year=row[Columns[0]].substr(0,4);
            month=row[Columns[0]].substr(4,2);
            row[Columns[0]]=year+'/'+month;
          }
          else if(row[Columns[0]].length===8)//yyyyMMdd
          {
            year=row[Columns[0]].substr(0,4);
            month=row[Columns[0]].substr(4,2);
            day=row[Columns[0]].substr(6,2);
            row[Columns[0]]=year+'/'+month+'/'+day;
          }
          else if(row[Columns[0]].length===10)//yyyyMMddHH
          {
            year=row[Columns[0]].substr(0,4);
            month=row[Columns[0]].substr(4,2);
            day=row[Columns[0]].substr(6,2);
            hour=row[Columns[0]].substr(8,2);
            row[Columns[0]]=year+'/'+month+'/'+day+' '+hour;
          }
          else if(row[Columns[0]].length===12)//yyyyMMddHHmm
          {
            year=row[Columns[0]].substr(0,4);
            month=row[Columns[0]].substr(4,2);
            day=row[Columns[0]].substr(6,2);
            hour=row[Columns[0]].substr(8,2);
            minute=row[Columns[0]].substr(10,2);
            row[Columns[0]]=year+'/'+month+'/'+day+' '+hour+':'+minute;
          }
          else if(row[Columns[0]].length===14)//yyyyMMddHHmmss
          {
            year=row[Columns[0]].substr(0,4);
            month=row[Columns[0]].substr(4,2);
            day=row[Columns[0]].substr(6,2);
            hour=row[Columns[0]].substr(8,2);
            minute=row[Columns[0]].substr(10,2);
            seconds=row[Columns[0]].substr(12,2);
            row[Columns[0]]=year+'/'+month+'/'+day+' '+hour+':'+minute+':'+seconds;
          }
        });
      }

      return DataTable;
    },
  },
};
</script>

<style>
</style>

注:一开始数据查询使用的是ajax请求WebService,但是当需要设置列的时间格式时,使用ajax查询出来数据之后没办法刷新数据,因此参考官网与其它地方改为以上方法查询数据

1.1.效果

2.实现带条件查询

2.1 给按钮绑定Click事件

<span><button @click="searchBtn_click" id="searchBtn">查询</button></span

2.1、实现Click事件(在methods中添加方法)

 // 查询按钮点击事件
    searchBtn_click: function () {
      //获取查询条件
      var temp = this.$refs.userID.$el.value;
      var temp = this.$refs.userName.$el.value;

      searchValues.push({ USER_ID: this.$refs.userID.$el.value }); //用户ID
      searchValues.push({ USER_NAME: this.$refs.userName.$el.value }); //用户姓名

      //JSON.stringify(object):将对象转为json格式字符串
      jsonStrSearchs=JSON.stringify(searchValues);

      self.dataTable= {
        transport: {
          //read:初始加载
          read: {
            type: "post",
            url: "http://localhost:2681//PXWebService.asmx/CallService", //测试链接
            data: { serviceName: "sm01_inq", parameters: jsonStrSearchs }, //传入参数
            dataType: "json",
          },
        },
        schema: {
          model: {
            id: "USER_ID", //设置主键
            fields: { REC_CREATE_TIME: { type: "date" } }, //设置字段类型
          },
          data: function (response) {
            //transport中请求返回的结果会在此返回
            var datas = response;
            var returnTable = [];
            datas.forEach((item) => {
              //如果直接在此处使用return,代码会执行两次,第二次会将返回值清空
              // returnTable = item.Table1;
              //调用数据类型转换方法(设置数据格式)
              returnTable = self.SetColumnDataType(item.Table1, "DateTime", [
                "REC_CREATE_TIME",
              ]);
            });
            return returnTable;
          },
        },
      };

      
    },

2.3、效果

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值