参考学习: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、效果