Vue开发学习笔记:(二)、实现KendoUIGrid新增数据功能 – 小飞侠

Vue开发学习笔记:(二)、实现KendoUIGrid新增数据功能

Post author:xfxia
Post published:2023年7月18日
Post category:vue

1.引用KendoUIGird并设置相关的属性

<div id="ShowData">
  <div class="searchLabel">信息区</div>
  <div>
	<!-- resizable:设置列宽可以调整 -->
	<!-- data-source:绑定数据源 -->
	<!-- columns:绑定自定义列集合 -->
	<!-- editable:设置Grid单元格可编辑性;inline:行内编辑;popup:弹出窗口编辑;true:直接可编辑 -->
	<!-- :toolbar="toolbar"绑定自定义按钮模板 -->
	<!-- change:绑定选择列触发选择调用的事件 -->
	<kendo-grid
	  id="pxGrid1"
	  :data-source="dataTable"
	  :resizable="true"
	  :columns="columns"
	  :editable="true"
	  :toolbar="toolbar"
	  :change="SelectRows"
	></kendo-grid>
  </div>
</div>

1.1、toolbar属性对应的值(自定义按钮模板)

toolbar: [
        {
          //如果要使用KendoUI自带的新增功能,只需要使用样式k-grid-add
          template:
            "<button id='btnAdd' class='k-button k-button-icontext k-grid-add edit_btn_css'>" +
            "<span class='k-icon k-i-plus'></span>新增" +
            "</button>",
          // imageclass: "k-icon k-i-check"
        },
        {
          template:
            "<button id='btnUpd'  class='k-button k-button-icontext k-grid-update edit_btn_css'>" +
            "<span class='k-icon k-i-pencil'></span>修改" +
            "</button>",
          // imageclass: "k-icon k-i-check"
        },
        {
          template:
            "<button id='btnSave' onclick='saveBtn_click()' class='k-button k-button-icontext edit_btn_css'>" +
            "<span class='k-icon k-i-check'></span>保存" +
            "</button>",
          // imageclass: "k-icon k-i-check"
        },
        {
          template:
            "<button id='btnCancel' class='k-button k-button-icontext k-grid-cancel-changes edit_btn_css'>" +
            "<span class='k-icon k-i-cancel'></span>撤销" +
            "</button>",
          // imageclass: "k-icon k-i-check"
        },
      ],
    };

1.2、绑定选择列触发选择调用的事件

SelectRows(event) {
      // console.log(event);
      // console.log(event.sender._selectedIds);
      // console.log(event.sender._selectedIds);
      selectedIds = event.sender._selectedIds;//获取选中的行主键ID
    },

注意:实现自定义按钮时绑定按钮的click事件方法时(保存按钮)需要在

created方法中使用windows.事件方法=self.事件方法,

否则绑定的事件方法无法调用没有效果

  created: function () {
    self = this;

    //由于拼接的HTML中使用@click绑定点击事件无效,因此使用onclick绑定,但是由于Vue中方法都定义
    //在methods中,所以在按钮点击时提示找不到对应的方法,需要使用window对象将Vue语法中的methods的方法
    //过渡到当前窗口中
    window.saveBtn_click = self.saveBtn_click;

    var search = searchValues;
  },

2、实现获取新增的数据行(保存按钮获取)

//保存按钮点击事件
saveBtn_click: function () {
  
  //清空数据表避免上次数据遗留
  dataTable=[];

  // alert("当前点击了保存按钮");
  var pxGrid = $("#pxGrid1");
  console.log(pxGrid);

  //获取Grid数据源
  var pxGridData = $("#pxGrid1").data("kendoGrid").dataSource._data;
  console.log(pxGridData);

  //获取对象数组中的Key值以及Key对应的Value值,通过主键去过滤未选中的行
  for (const key in selectedIds) {
	if (Object.hasOwnProperty.call(selectedIds, key)) {
	  const element = selectedIds[key];
	  // console.log("当前Key值" + key);
	  pxGridData.forEach((row) => {
		if (key === row["USER_ID"]) {
		  dataTable.push(row);
		}
	  });
	}
  }

修改:2021.03.02 ;获取选中行数据新方法(学习于:

https://blog.csdn.net/chelen_jak/article/details/73178094

)

//20210302;新的获取选行数据逻辑方法
var grid = $("#pxGrid1").data("kendoGrid");
var row = grid.select();

$(row).each(function () {
	var dataItem = grid.dataItem(this);
	dataTable.push(dataItem);
});

思路:通过选择列的触发事件获取选中的行对象,然后通过观察行对象的属性获取选中行的主键字段信息(是一个键值对数组),在保存时通过键值跟KendoUIGrid的所有数据行做对比,然后筛选出选中的数据行

存入新的变量中传入后台

3.完整代码:

<template>
  <div>
    <div id="SearchConditions">
      <div class="searchLabel">查询条件</div>
      <div id="searchComponents">
        <span
          >工号:<kendo-maskedTextBox ref="userID" title=""></kendo-maskedTextBox
        ></span>
        <span
          >姓名:<kendo-maskedTextBox
            ref="userName"
            title=""
          ></kendo-maskedTextBox
        ></span>
        <span
          ><button
            @click="searchBtn_click"
            id="searchBtn"
            class="k-button k-button-icontext"
          >
            <span class="k-icon k-i-search"></span>查询
          </button></span
        >
        <span><button onclick="saveBtn_click()">方法测试</button></span>
      </div>
    </div>
    <div id="ShowData">
      <div class="searchLabel">信息区</div>
      <div>
        <!-- resizable:设置列宽可以调整 -->
        <!-- data-source:绑定数据源 -->
        <!-- columns:绑定自定义列集合 -->
        <!-- editable:设置Grid单元格可编辑性;inline:行内编辑;popup:弹出窗口编辑;true:直接可编辑 -->
        <!-- :toolbar="toolbar":绑定自定义按钮模板 -->
        <!-- change:绑定选择列触发选择调用的事件 -->
        <kendo-grid
          id="pxGrid1"
          :data-source="dataTable"
          :resizable="true"
          :columns="columns"
          :editable="true"
          :toolbar="toolbar"
          :change="SelectRows"
        ></kendo-grid>
      </div>
    </div>
  </div>
</template>

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

//全局变量
var self;
var searchValues = [];
var jsonStrSearchs = "";
var jsonStrTableInfo = "";
var selectedIds; //获取选中的行ID(主键)
var dataTable=[];

export default {
  name: "FormSM01",
  components: {
    "kendo-maskedTextBox": MaskedTextBox,
    "kendo-grid": Grid,
    "kendo-gridcolumn": GridColumn,
    "kendo-dataSource": KendoDataSource,
  },
  data: function () {
    return {
      selectedField: "selected",
      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" },
              REC_MODIFY_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",
                "REC_MODIFY_TIME",
              ]);
            });
            return returnTable;
          },
        },
      },
      // dataTable:[],
      //自定义列集合,页面只显示需要列
      columns: [
        // field:列名,title:列标题,format:数据掩码格式;locked:锁定列(Grid必须有水平滚动条才使用锁定功能)
        { field: "selected", selectable: true, width: 40 }, //设置选择列
        { 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}",
          width: 200,
        },
        { field: "REC_MODIFIER", title: "记录修改人" },
        {
          field: "REC_MODIFY_TIME",
          title: "记录修改时间",
          format: "{0:yyyy-MM-dd HH:mm:ss}",
          width: 200,
        },
      ],
      //toolbar:[{template: kendo.template($("#gridBar").html())}]
      toolbar: [
        {
          //如果要使用KendoUI自带的新增功能,只需要使用样式k-grid-add
          template:
            "<button id='btnAdd' class='k-button k-button-icontext k-grid-add edit_btn_css'>" +
            "<span class='k-icon k-i-plus'></span>新增" +
            "</button>",
          // imageclass: "k-icon k-i-check"
        },
        {
          template:
            "<button id='btnUpd'  class='k-button k-button-icontext k-grid-update edit_btn_css'>" +
            "<span class='k-icon k-i-pencil'></span>修改" +
            "</button>",
          // imageclass: "k-icon k-i-check"
        },
        {
          template:
            "<button id='btnSave' onclick='saveBtn_click()' class='k-button k-button-icontext edit_btn_css'>" +
            "<span class='k-icon k-i-check'></span>保存" +
            "</button>",
          // imageclass: "k-icon k-i-check"
        },
        {
          template:
            "<button id='btnCancel' class='k-button k-button-icontext k-grid-cancel-changes edit_btn_css'>" +
            "<span class='k-icon k-i-cancel'></span>撤销" +
            "</button>",
          // imageclass: "k-icon k-i-check"
        },
      ],
    };
  },
  created: function () {
    self = this;

    //由于拼接的HTML中使用@click绑定点击事件无效,因此使用onclick绑定,但是由于Vue中方法都定义
    //在methods中,所以在按钮点击时提示找不到对应的方法,需要使用window对象将Vue语法中的methods的方法
    //过渡到当前窗口中
    window.saveBtn_click = self.saveBtn_click;

    var search = searchValues;
  },
  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;
          },
        },
      };
    },

    //保存按钮点击事件
    saveBtn_click: function () {
      
      //清空数据表避免上次数据遗留
      dataTable=[];

      // alert("当前点击了保存按钮");
      var pxGrid = $("#pxGrid1");
      console.log(pxGrid);

      //获取Grid数据源
      var pxGridData = $("#pxGrid1").data("kendoGrid").dataSource._data;
      console.log(pxGridData);

    //20210302;新的获取选行数据逻辑方法
    var grid = $("#pxGrid1").data("kendoGrid");
    var row = grid.select();

    $(row).each(function () {
	    var dataItem = grid.dataItem(this);
	    dataTable.push(dataItem);
    });

      //获取对象数组中的Key值以及Key对应的Value值,通过主键去过滤未选中的行
     // for (const key in selectedIds) {
     //   if (Object.hasOwnProperty.call(selectedIds, key)) {
     //     const element = selectedIds[key];
     //     // console.log("当前Key值" + key);
     //     pxGridData.forEach((row) => {
     //       if (key === row["USER_ID"]) {
     //         dataTable.push(row);
      //      }
     //     });
     //   }
     // }

      console.log(dataTable);

      jsonStrTableInfo = JSON.stringify(dataTable);

      //新增
      $.ajax({
        type: "post",
        url: "http://localhost:2681//PXWebService.asmx/CallService",
        data: { serviceName: "sm01_ins", parameters: jsonStrTableInfo },
        dataType: "json",
        success: function (response) {
          console.log(response);
        },
        error: function (ex) {//失败回调
        console.log("执行ajax请求失败");
        alert(ex.responseText);
      },
      });

      //获取Grid中的列
      // var selectedCol = pxGridDataSource.options.fields[0];
      // console.log(selectedCol);
    },

    //获取选择的行
    SelectRows(event) {
      // console.log(event);
      // console.log(event.sender._selectedIds);
      // console.log(event.sender._selectedIds);
      selectedIds = event.sender._selectedIds;//获取选中的行主键ID
    },

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

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

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

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

<style>
.searchLabel {
  /* 设置内容居中显示 */
  line-height: 30px;
  height: 30px;

  background: #436fe9;
  color: white;

  padding-left: 20px;

  margin-top: 10px;
}

/* 查询条件相关 */
#searchComponents {
  border: 1px solid rgb(189, 189, 189);
  height: 50px;

  /**设置内容边距 */
  padding-top: 10px;
  /* padding-left: 20px; */
}

#searchComponents span {
  margin-left: 20px;
}
/* 查询条件相关 */

/* 查询按钮相关 */
#searchBtn {
  background: #436fe9;
  color: white;
  padding-right: 30px;
}
#searchBtn:hover {
  background: #2c54c0;
}
/* 查询按钮相关 */

.edit_btn_css {
  background: #436fe9;

  color: white;
}
.edit_btn_css:hover {
  background: #2c54c0;
  color: white;
}
</style>

最终效果:

版权声明：本文为JustWantToFly原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/JustWantToFly/article/details/114091638