Vue开发学习笔记:KendoUIGrid实现自动添加序号

1.学习自

https://blog.youkuaiyun.com/jinuxm/article/details/53169329

https://blog.youkuaiyun.com/qwerdfcv/article/details/103479584

 

2.实现

2.1、首先为KendoUIGrid绑定一个数据绑定事件dataBound

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

2.2、Grid列中添加一个序号列 

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: "ROWID", //设置主键
            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: "",
          title: "行号",
          template: "<span class='ROWID'></span>",
          width: 55,
        },
        { 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' onclick='addBtn_click()' class='k-button k-button-icontext 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"
        },
      ],
    };
  },

2.3、在数据绑定事件中实现序号的添加

methods: {

    //数据绑定事件，可实现查询后，需要执行的操作
    dataBound: function () {
      //自动添加序号
      var rows = $("#pxGrid1").data("kendoGrid").items();
      $(rows).each(function () {
        var index = $(this).index() + 1;
        var rowLabel = $(this).find(".ROWID");
        $(rowLabel).html(index);
      });
    },
  },