解决使用records = store.getModifiedRecords(),records.length 长度错误，得到上次修改记录。commitChanges()

最新推荐文章于 2021-03-25 10:46:34 发布
原创 最新推荐文章于 2021-03-25 10:46:34 发布 · 2.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#function

本文探讨了在ExtJS框架中遇到的一个问题：修改记录数显示不准确。具体表现为，在进行多次修改操作后，显示的修改记录数为所有修改次数的累加。文章提供了问题的解决方案，即在每次修改完成后调用store的commitChanges方法。

示例： 

BaseStationCutAction.updateCutBscByBts(param, modifyList, function(_result){
             scope.getEl().unmask();
             scope.btsGrid.store.commitChanges();
             scope.btsGrid.store.reload();
             Ext.MessageBox.show({
                  title : '提示',
                  msg:"成功修改"+_result+"条数据!",
                  buttons: Ext.MessageBox.OK,
                  fn : function () {return},
                  icon: Ext.MessageBox.INFO
               });
      });

问题描述： 修改后显示的修改记录数是错误的，经过查找发现如果修改之前做过一次修改，第二次修改时，getModifiedRecords()方法会获取到第一次修改的记录，

                      所得到的记录数是两次修改的记录数的累加。

在成功修改后，调用回调函数 ， 使用commitChanges()方法，就可以解决此问题。

惊喜不断：http://whitelover.taobao.com

 

Ext.data.Store
德仔
07-06 2167
Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件，无论是Grid还是ComboBox，都是通过它实现数据读取、类型转换、排序分页和搜索等操作的。Ext.data.Store中有一个Ext.data.Record数组，所有数据都存放在
[Ext.Net]Ext.Store基本用法
德仔
10-02 4237
我们在开发程序过程中经常要操作store,需要经常查询API。 故收集一些方法放到博客中 store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表 方法:不列举继承来的方法 Store( Object config ) 构造,config定义为{ autoLoad : Boolean/Object, //自动载入 baseParams : Object,
Ext中 store.getModifiedRecords().length 问题
Orszsxlping
08-12 568
问题描述： grid中，批量修改多条数据时，发现修改后显示的修改记录数是错误的，经过查找发现如果修改之前做过一次修改，第二次修改时，getModifiedRecords()方法会获取到第一次修改的记录， 所得到的记录数是两次修改的记录数的累加。 代码： {  text:"保存",  id:"save",  icon : ImageURL+"save.gif",  handler : func
store 的 getModifiedRecords() 需要 commitChanges()
持续疯长，往天那边去
01-23 548
store的getModifiedRecords()每次处理完后需要commitChanges() ；否则下次getModifiedRecords()还会出现上次的记录！
解决 Github “Commit new file” 和 “Commit changes” 是灰色的问题
小夏陌的博客
05-14 1万+
简介 有时嫌命令行费事，想直接用网页修改或上传文件时，发现 "Commit new file "和"Commit changes"是灰色的，没有办法点击和使用，如下图 解决方案 1、可能是没有填完必填项，或未做任何修改，所以是灰的，填完即可 2、你并没有权力修改Master的权利，只能修改分支的，这时你可以提升权利，或者在分支上修改 3、我的原因最坑，我的老司机浏览器有问题，换成最新的谷歌浏览器...
Extjs3.4 Store中pruneModifiedRecords配置和getModifiedRecords方法搭配问题
第三眼的思绪
08-21 2450
在Extjs3.4中，Store
C#新建站点,删除站点函数代码
xqf222的专栏
11-21 1789
using System;using System.Drawing;using System.Collections;using System.ComponentModel;using System.Windows.Forms;using System.Windows.Forms.Design;using System.DirectoryServices;using System.Reflecti
beforedeselect: function(grid, record, index, eOpts ) { var modifiedNum = certificateNoJspPanel.pdtNoGrid.getStore().getModifiedRecords().length; if (modifiedNum > 0) { Ext.MessageBox.confirm('切换确认', '当前成品编号有未保存数据，切换图号后数据更改将被放弃！', function (confirm) { if (confirm == 'yes') { return true; }else{ return false; } }); } }如何让这段代码中的 Ext.MessageBox.confirm显示在最前面
05-26
var modifiedNum = certificateNoJspPanel.pdtNoGrid.getStore().getModifiedRecords().length; if (modifiedNum > 0) { Ext.MessageBox.confirm('切换确认', '当前成品编号有未保存数据，切换图号后数据更改将被...
<c-search-panel :columns=“tableState.columns.concat(extraColumns)” @search=“onSearch” > <c-table :columns=“tableState.columns” :toolbar=“tableState.toolbar” :sortConfig=“{ showIcon: false }” :proxy-config=“tableState.proxyConfig” @toolbar-button-click=“onToolbarClick” :pagination=“tableState.pagination” :row-selection=“rowSelection” ref=“tableRef” > <template #action=“{ record }”> <a-button type=“link” @click=“editWorkSpace(record)” v-resource=“[{ url: ‘/service-piping/cp/production/lineWorkSpace’, method: ‘POST’ }]” > 分配工位 <a-button type=“link” @click=“setAssyGroupRule(record)” v-resource=“[{ url: ‘/service-piping/cp/production/updateAssyGroupRule’, method: ‘POST’ }]” > 设置组立规则 <a-button type=“primary” style=“margin-right: 10px” @click=“addWorkSpace” :icon=“h(PlusOutlined)” v-resource=“[{ url: ‘/service-piping/cp/production/lineWorkSpace’, method: ‘POST’ }]” >新增 <a-button type=“primary” style=“margin-right: 10px” @click=“saveWorkSpace” :icon=“h(SaveOutlined)” v-resource=“[{ url: ‘/service-piping/cp/production/lineWorkSpace’, method: ‘POST’ }]” >保存 <a-button type=“primary” danger @click=“deleteWorkSpace” :icon=“h(DeleteOutlined)” v-resource=“[ { url: ‘/service-piping/cp/production/lineWorkSpace/delete’, method: ‘POST’ } ]” >删除 <template #workSpaceText=“{ record }”> {{ record.workSpaceNo }} <template #workSpace=“{ record }”> <a-select showSearch allow-clear v-model:value=“record.workSpaceNo” @change=“changeWorkSpace($event, record)”> {{ item.workSpaceNo }} <c-modal :title=“‘设置组立拆分规则’” v-model:open=“assyGroupRuleVisible” destroyOnClose @ok=“handleAssyGroupRuleOk” @cancel=“handleAssyGroupRuleCancel” width=“40%” > import * as server from “@/packages/piping/api/basic/index” import {computed, createVNode, h, reactive, ref} from “vue” import {message, Modal} from “ant-design-vue” import {DeleteOutlined, ExclamationCircleOutlined, PlusOutlined, SaveOutlined} from “@ant-design/icons-vue”; const tableState = reactive({ toolbar: { buttons: [ { code: “insertInline”, status: ‘primary’, icon: ‘PlusOutlined’, name: “新增” }, { code: “saveData”, status: ‘primary’, icon: ‘SaveOutlined’, name: “保存” }, { code: “switchStatus”, name: “启用/禁用” } ], showFilter: false }, selectedRowKeys: [], selectedRows: [], pagination: {pageSize: 20}, proxyConfig: { autoLoad: false, ajax: { query: async (pagination) => { const response = await server.productionLinePage({…pagination, …conditionData.value}) response.data.content.forEach((record) => { if (record.matDefinition) { record.matDefinitionText = record.matDefinition record.matDefinition = record.matDefinition.split(“,”) } }) return response } } }, columns: [ { title: “产线名称”, dataIndex: “productionLineName”, width: 80, condition: true, editable: true, rules: [{required: true, message: “必填项！”}] }, { title: “基地”, dataIndex: “orgNo”, condition: true, editable: true, rules: [{required: true, message: “必填项！”}], width: 80, type: “buildCase”, }, { title: “材质”, dataIndex: “matDefinition”, type: “select”, editable: true, width: 70, formatter: ({row}) => row.matDefinitionText, options: { mode: “multiple”, options: [], fieldNames: {label: “matDefinitionCn”, value: “matDefinitionCn”}, ajax: server.matDefinitionDropList().then((res) => { return res; }), }, rules: [{required: true, message: “必填项！”}] }, { title: “最大管径”, dataIndex: “maxPipeDia”, width: 80, condition: true, editable: true, rules: [{required: true, message: “必填项！”}] }, { title: “最小管径”, dataIndex: “minPipeDia”, width: 80, condition: true, editable: true, rules: [{required: true, message: “必填项！”}] }, { title: “最大长度”, dataIndex: “maxLength”, width: 80, condition: true, editable: true, rules: [{required: true, message: “必填项！”}] }, { title: “最小长度”, dataIndex: “minLength”, width: 80, condition: true, editable: true, rules: [{required: true, message: “必填项！”}] }, { dataIndex: “status”, title: “启用”, type: “select”, editable: true, width: 50, decorator: {initialValue: “Y”}, options: { options: [ {value: “Y”, label: “Y”}, {value: “N”, label: “N”} ] }, rules: [{required: true, message: “必填项！”}] }, { title: “产能”, children: [ { title: “下料”, dataIndex: “layingOffCapacity”, width: 50 }, { title: “一次组对产能”, dataIndex: “primaryPairCapacity”, width: 60 }, { title: “一次焊接产能”, dataIndex: “primaryWeldCapacity”, align: “center”, width: 60 }, { title: “成品组对产能”, dataIndex: “finishedPairCapacity”, align: “center”, width: 60 }, { title: “成品焊接产能”, dataIndex: “finishedWeldCapacity”, align: “center”, width: 60 } ] }, { title: “操作”, key: “action”, scopedSlots: {customRender: “action”}, width: 120, fixed: “right”, formInvisible: true } ] }) const extraColumns = ref([ { title: “材质”, dataIndex: “matDefinition”, width: 80, condition: true } ]) const tableRef = ref(null) const ctable = computed(() => tableRef.value?.getTable()) const conditionData = ref() const productionLineId = ref(null) const workSpaceModalVisible = ref(false) const workSpaceData = ref([]) const workSpaceTableRef = ref(null) const cWorkSpaceTable = computed(() => workSpaceTableRef.value?.getTable()) const workSpaceList = ref([]) const workSpaceState = reactive({ selectedRowKeys: [], selectedRows: [], columns: [ { title: “工位号”, dataIndex: “workSpaceNo”, type: “select”, width: 70, condition: true, editable: true, rules: [{required: true, message: “请选择工位”}], scopedSlots: { customEditorRender: “workSpace”, customRender: “workSpaceText” } }, { title: “工位类型”, dataIndex: “workSpaceType”, width: 70 }, { title: “产能”, dataIndex: “capacity”, width: 60, }, { dataIndex: “status”, title: “有效”, type: “select”, width: 50, options: { options: [ {value: “Y”, label: “Y”}, {value: “N”, label: “N”} ] } } ] }) const formState = ref({ assyGroupRule: “”, }) const formRef = ref() const assyGroupRuleVisible = ref(false) const id = ref(null) //搜索 const onSearch = (values) => { conditionData.value = values ctable.value.commitProxy(“query”, values) } //表头按钮操作 const onToolbarClick = (target) => { switch (target.code) { case “insertInline”: insertInline() break case “saveData”: saveData() break case “switchStatus”: switchStatus() break default: break } } const insertInline = () => { ctable.value.insert({status: “Y”}) } const rowSelection = computed(() => { return { selectedRowKeys: tableState.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { tableState.selectedRowKeys = selectedRowKeys tableState.selectedRows = selectedRows } } }) const workSpaceRowSelection = computed(() => { return { selectedRowKeys: workSpaceState.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { workSpaceState.selectedRowKeys = selectedRowKeys workSpaceState.selectedRows = selectedRows } } }) const saveData = () => { const updateRecords = ctable.value.getUpdateRecords() if (!updateRecords || updateRecords.length == 0) return updateRecords.forEach((record) => { const matDefinition = record.matDefinition if (Array.isArray(matDefinition)) { const newMaterial = matDefinition.join(“,”) record.matDefinition = newMaterial } }) ctable.value.validateEditFields().then(() => { server.productionLineSave(updateRecords).then(() => { message.success(“保存成功”) ctable.value.commitProxy(“query”) }) }) } const switchStatus = () => { if (tableState.selectedRowKeys.length == 0) { message.error(“请选择至少一条数据”) return } let selectedRows = tableState.selectedRows.map((item) => { return { …item, status: item.status == “Y” ? “N” : “Y”, matDefinition: item.matDefinition.join(“,”) } }) server .productionLineSave(selectedRows) .then(() => { message.success(“状态切换成功”) tableState.selectedRowKeys = [] ctable.value.commitProxy(“query”) }) .catch(() => { message.error(“状态切换失败”) }) } const editWorkSpace = (record) => { workSpaceData.value = [] productionLineId.value = record.id server.getWorkSpaceList({orgNo: record.orgNo}).then((res) => { workSpaceList.value = res.data }) workSpaceState.selectedRowKeys = [] getWorkSpace(productionLineId.value) } const setAssyGroupRule = (record) => { id.value = record.id formState.value.assyGroupRule = record.assyGroupRule assyGroupRuleVisible.value = true } const getWorkSpace = (productionLineId) => { server.getProductionLineWorkSpaceList({productionLineId}).then((response) => { workSpaceData.value = response.data workSpaceModalVisible.value = true }) } const changeWorkSpace = (workSpaceNo, currentRow) => { const selectedWorkSpace = workSpaceList.value.find(item => item.workSpaceNo === workSpaceNo); currentRow.workSpaceType = selectedWorkSpace.workSpaceType currentRow.capacity = selectedWorkSpace.capacity currentRow.status = selectedWorkSpace.status } const addWorkSpace = () => { cWorkSpaceTable.value.insert({}) } const saveWorkSpace = () => { const allRecords = cWorkSpaceTable.value.getUpdateRecords() debugger if (!allRecords || allRecords.length == 0) return allRecords.forEach((record) => { record.productionLineId = productionLineId.value }) cWorkSpaceTable.value.validateEditFields().then(() => { server.productionLineWorkSpaceSave(allRecords).then(() => { message.success(“保存成功”) workSpaceModalVisible.value = false }) }) } const deleteWorkSpace = () => { if (workSpaceState.selectedRowKeys.length == 0) { message.error(“请选择至少一条数据”) return } Modal.confirm({ title: “请确认是否要进行删除？”, icon: createVNode(ExclamationCircleOutlined), content: “该操作一旦执行无法撤回”, okText: “确认”, okType: “danger”, cancelText: “取消”, onOk() { let selectedRows = workSpaceState.selectedRows.map((item) => { return { …item, productionLineId: productionLineId.value } }) server.productionLineWorkSpaceDelete(selectedRows).then(() => { message.success(“删除成功”) getWorkSpace(productionLineId.value) }) }, onCancel() { console.log(“Cancel”) } }) } const handleAssyGroupRuleOk = () => { formRef.value .validate().then(() => { assyGroupRuleVisible.value = false server.productionLineAssyGroupRule({ …formState.value, id: id.value }).then(() => { message.success(“保存成功”) ctable.value.commitProxy(“query”) assyGroupRuleVisible.value = false }) }) } const handleAssyGroupRuleCancel = () => { assyGroupRuleVisible.value = false ctable.value.commitProxy(“query”) } cWorkSpaceTable.value.getUpdateRecords()新增的时候能获取到但是编辑的时后，获取不到编辑的行 c-table代码：<template> <div class="c-table-wrap"> <c-toolbar :toolbar="toolbar" @toolbar-button-click="onToolbarClick"></c-toolbar> <c-table-main v-bind="$attrs" :customType="customType" ref="tableRef" @change="onTableChange"> <!-- 通过便利实现插槽透传 --> <template v-for="(item, key, slotIndex) in $slots" :key="slotIndex" v-slot:[key]="{ record, index, column }" > <slot :name="key" v-bind="{ key: key, index: index, record: record, column: column }" :onEdit="() => onEdit(column, record)" ></slot> </template> </c-table-main> </div> </template> <script> import { defineComponent, provide, ref, h } from 'vue' import CTableMain from './CTableMain.vue' import CToolbar from './CToolbar.vue' import { useProjectDropList } from '@packages/hooks/useProjectDropList' import { useCompanyDropList } from '@packages/hooks/useCompanyDropList' import { useCooperantDropList } from '@packages/hooks/useCooperantDropList' import { useBuildCaseDropList } from '@packages/hooks/useBuildCaseDropList' import { useOrganizationDropList } from '@packages/hooks/useOrganizationDropList' import { useMajorDropList } from '@packages/hooks/useMajorDropList' import { useTechMajorDropList } from '@packages/hooks/useTechMajorDropList' import CEmployeeDescription from '@packages/components/CEmployeeDescription/CEmployeeDescription.vue' import CUserInput from '@packages/components/CUserInput/CUserInput.vue' import CProjectSelect from '@packages/components/CProjectSelect/CProjectSelect.vue' import CCompanySelect from '@packages/components/CCompanySelect/CCompanySelect.vue' import CCooperantSelect from '@packages/components/CCooperantSelect/CCooperantSelect.vue' import CBuildCaseSelect from '@packages/components/CBuildCaseSelect/CBuildCaseSelect.vue' import COrganizationSelect from '@packages/components/COrganizationSelect/COrganizationSelect.vue' import CMajorSelect from '@packages/components/CMajorSelect/CMajorSelect.vue' import CTechMajorSelect from '@packages/components/CTechMajorSelect/CTechMajorSelect.vue' class ProjectCellRender { constructor(column) { this.column = column this.projects = [] this.ajaxReq = undefined } async getProjects(column, _this) { if (_this.projects.length > 0) { return _this.projects } const props = column.options || {} const { getProjectList } = useProjectDropList() this.ajaxReq = this.ajaxReq || getProjectList(props.parameter) const response = await this.ajaxReq _this.projects = response.map((item) => props.fieldNames && props.fieldNames instanceof Function ? props.fieldNames(item) : { label: props?.fieldNames?.label ? item[props.fieldNames.label] : `${item.projId}`, value: props?.fieldNames?.value ? item[props.fieldNames.value] : item.projNo } ) return _this.projects } async displayRender(args, column, data, _this) { const { text } = args if (column.formatter && column.formatter instanceof Function) { return column.formatter({ ...args, cellValue: args.text, row: args.record }) } else { const projects = await _this.getProjects(column, _this) const item = projects.find((x) => x.value == text) return item ? item.label : text } } editorRender({ text, record }, column, data, _this) { // eslint-disable-next-line no-unused-vars const { fieldNames, ...restOptions } = column.options || {} return h(CProjectSelect, { value: text, size: 'small', allowClear: true, showSearch: false, allowCustom: false, fieldNames: fieldNames, customStyle: column.customStyle || { width: '100px' }, filterOption: (input, option) => { return ( option && option.label && option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ) }, ...restOptions, onChange: (projectValue, projectOrigin) => { restOptions?.onChange?.(projectOrigin, record) record[column.dataIndex] = projectValue record['isEdit'] = true column['isEdit'] = true // 配置 // column.customCell = (recordCell, rowIndex, columnCell) => { // if (recordCell.id === record.id) { // return { // style: { // 'background-color': 'rgb(255,150,150)' // } // } // } // } } }) } } class EmployeeCellRender { constructor(column) { this.column = column } displayRender({ text, record }, column) { let displayValue let displayLabel if (Object.prototype.toString.call(text) === '[object Object]') { displayValue = text.code displayLabel = text.name } else { const displayProperty = column.options && column.options.fieldNames displayValue = (displayProperty && record[displayProperty.value]) || '' displayLabel = displayProperty && record[displayProperty.label] } return h( CEmployeeDescription, { rowKey: displayValue || text, rowName: displayLabel }, { default: () => h('span', displayLabel ? `${displayLabel} (${displayValue})` : text) } ) } editorRender({ text, record }, column, data, _this) { const { fieldNames, ...restOptions } = column.options || {} let userValue // eslint-disable-next-line no-unused-vars if (Object.prototype.toString.call(text) === '[object Object]') { userValue = { label: text.name || text.label, value: text.code || text.value } } else { userValue = record[column.dataIndex] || { label: record[fieldNames.label], value: record[fieldNames.value] } } return h(CUserInput, { value: userValue, size: 'small', customStyle: column.customStyle || { width: '100px' }, filterOption: (input, option) => { return ( option && option.label && option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ) }, ...restOptions, onChange: (user) => { restOptions?.onChange?.(user, record) //修改当前行的组装数据及原数据 record[column.dataIndex] = user //displayRender 使用下面值 record[fieldNames.label] = user.label record[fieldNames.value] = user.value record['isEdit'] = true column['isEdit'] = true } }) } } class UsersCellRender { constructor(column) { this.column = column } displayRender(args, column, data, _this) { const { text } = args if (column.formatter && column.formatter instanceof Function) { return column.formatter({ ...args, cellValue: args.text, row: args.record }) } else { return text } } editorRender({ text, record }, column, data, _this) { // eslint-disable-next-line no-unused-vars const { fieldNames = {}, ...restOptions } = column.options || {} //源数据，后端接口返回的多个用户字段 const { dataIndex, label, value } = fieldNames const userValues = record[dataIndex]?.map((user) => ({ label: user[label], value: user[value] })) || [] return h(CUserInput, { value: userValues, size: 'small', mode: 'multiple', customStyle: column.customStyle || { width: '100px' }, filterOption: (input, option) => { return ( option && option.label && option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ) }, ...restOptions, onChange: (users) => { restOptions?.onChange?.(users, record) //修改当前行的组装数据及原数据 record[column.dataIndex] = users record[dataIndex] = users.map((user) => ({ [label]: user.label, [value]: user.value })) record['isEdit'] = true column['isEdit'] = true } }) } } class CompanyCellRender { constructor(column) { this.column = column this.companys = [] this.ajaxReq = undefined } async getCompanys(column, _this) { if (_this.companys.length > 0) { return _this.companys } const props = column.options || {} const { getCompanyList } = useCompanyDropList() this.ajaxReq = this.ajaxReq || getCompanyList(props.parameter) const response = await this.ajaxReq _this.companys = response.map((item) => props.fieldNames && props.fieldNames instanceof Function ? props.fieldNames(item) : { label: props?.fieldNames?.label ? item[props.fieldNames.label] : `${item.name}`, value: props?.fieldNames?.value ? item[props.fieldNames.value] : item.code } ) return _this.companys } async displayRender(args, column, data, _this) { const { text } = args if (column.formatter && column.formatter instanceof Function) { return column.formatter({ ...args, cellValue: args.text, row: args.record }) } else { const companys = await _this.getCompanys(column, _this) const item = companys.find((x) => x.value === text) return item ? item.label : text } } editorRender({ text, record }, column, data, _this) { // eslint-disable-next-line no-unused-vars const { fieldNames, ...restOptions } = column.options || {} return h(CCompanySelect, { value: text, size: 'small', allowClear: true, showSearch: false, customStyle: column.customStyle || { width: '100px' }, filterOption: (input, option) => { return ( option && option.label && option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ) }, ...restOptions, onChange: (project) => { restOptions?.onChange?.(project, record) record[column.dataIndex] = project.value record['isEdit'] = true column['isEdit'] = true } }) } } class CooperantCellRender { constructor(column) { this.column = column this.cooperants = [] this.ajaxReq = undefined } async getCooperants(column, _this) { if (_this.cooperants.length > 0) { return _this.cooperants } const props = column.options || {} const { getCooperantList } = useCooperantDropList() this.ajaxReq = this.ajaxReq || getCooperantList(props.parameter) const response = await this.ajaxReq _this.cooperants = response.map((item) => props.fieldNames && props.fieldNames instanceof Function ? props.fieldNames(item) : { label: props?.fieldNames?.label ? item[props.fieldNames.label] : `${item.shortName}`, value: props?.fieldNames?.value ? item[props.fieldNames.value] : item.no } ) return _this.cooperants } async displayRender(args, column, data, _this) { const { text } = args if (column.formatter && column.formatter instanceof Function) { return column.formatter({ ...args, cellValue: args.text, row: args.record }) } else { const cooperants = await _this.getCooperants(column, _this) const item = cooperants.find((x) => x.value === text) return item ? item.label : text } } editorRender({ text, record }, column, data, _this) { // eslint-disable-next-line no-unused-vars const { fieldNames, ...restOptions } = column.options || {} return h(CCooperantSelect, { value: text, size: 'small', allowClear: true, showSearch: false, customStyle: column.customStyle || { width: '100px' }, filterOption: (input, option) => { return ( option && option.label && option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ) }, ...restOptions, onChange: (project) => { restOptions?.onChange?.(project, record) record[column.dataIndex] = project.value record['isEdit'] = true column['isEdit'] = true } }) } } class BuildCaseCellRender { constructor(column) { this.column = column this.buildCases = [] this.ajaxReq = undefined } async getBuildCases(column, _this) { if (_this.buildCases.length > 0) { return _this.buildCases } const props = column.options || {} const { getBuildCaseList } = useBuildCaseDropList() this.ajaxReq = this.ajaxReq || getBuildCaseList(props.parameter) const response = await this.ajaxReq _this.buildCases = response.map((item) => props.fieldNames && props.fieldNames instanceof Function ? props.fieldNames(item) : { label: props?.fieldNames?.label ? item[props.fieldNames.label] : item.name, value: props?.fieldNames?.value ? item[props.fieldNames.value] : item.orgNo } ) return _this.buildCases } async displayRender(args, column, data, _this) { const { text } = args if (column.formatter && column.formatter instanceof Function) { return column.formatter({ ...args, cellValue: args.text, row: args.record }) } else { const buildCases = await _this.getBuildCases(column, _this) const item = buildCases.find((x) => x.value === text) return item ? item.label : text } } editorRender({ text, record }, column, data, _this) { // eslint-disable-next-line no-unused-vars const { fieldNames, ...restOptions } = column.options || {} return h(CBuildCaseSelect, { value: text, size: 'small', allowClear: true, showSearch: false, allowCustom: false, customStyle: column.customStyle || { width: '100px' }, filterOption: (input, option) => { return ( option && option.label && option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ) }, ...restOptions, onChange: (buildCase) => { restOptions?.onChange?.(buildCase, record) record[column.dataIndex] = buildCase.value record['isEdit'] = true column['isEdit'] = true } }) } } class MajorCellRender { constructor(column) { this.column = column this.majors = [] this.ajaxReq = undefined } async getMajors(column, _this) { if (_this.majors.length > 0) { return _this.majors } const props = column.options || {} const { getMajorList } = useMajorDropList() this.ajaxReq = this.ajaxReq || getMajorList(props.parameter) const response = await this.ajaxReq _this.majors = response.map((item) => props.fieldNames && props.fieldNames instanceof Function ? props.fieldNames(item) : { label: props?.fieldNames?.label ? item[props.fieldNames.label] : item.name, value: props?.fieldNames?.value ? item[props.fieldNames.value] : item.id } ) return _this.majors } async displayRender(args, column, data, _this) { const { text } = args if (column.formatter && column.formatter instanceof Function) { return column.formatter({ ...args, cellValue: args.text, row: args.record }) } else { const majors = await _this.getMajors(column, _this) const item = majors.find((x) => x.value === text) return item ? item.label : text } } editorRender({ text, record }, column, data, _this) { // eslint-disable-next-line no-unused-vars const { fieldNames, ...restOptions } = column.options || {} return h(CMajorSelect, { value: text, size: 'small', allowClear: true, allowCustom: false, showSearch: false, customStyle: column.customStyle || { width: '100px' }, filterOption: (input, option) => { return ( option && option.label && option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ) }, ...restOptions, onChange: (major) => { restOptions?.onChange?.(major, record) record[column.dataIndex] = major.value record['isEdit'] = true column['isEdit'] = true } }) } } class TechMajorCellRender { constructor(column) { this.column = column this.techMajors = [] this.ajaxReq = undefined } async getTechMajors(column, _this) { if (_this.techMajors.length > 0) { return _this.techMajors } const props = column.options || {} const { getTechMajorList } = useTechMajorDropList() this.ajaxReq = this.ajaxReq || getTechMajorList(props.parameter) const response = await this.ajaxReq _this.techMajors = response.map((item) => props.fieldNames && props.fieldNames instanceof Function ? props.fieldNames(item) : { label: props?.fieldNames?.label ? item[props.fieldNames.label] : item.name, value: props?.fieldNames?.value ? item[props.fieldNames.value] : item.id } ) return _this.techMajors } async displayRender(args, column, data, _this) { const { text } = args if (column.formatter && column.formatter instanceof Function) { return column.formatter({ ...args, cellValue: args.text, row: args.record }) } else { const techMajors = await _this.getTechMajors(column, _this) const item = techMajors.find((x) => x.value === text) return item ? item.label : text } } editorRender({ text, record }, column, data, _this) { // eslint-disable-next-line no-unused-vars const { fieldNames, ...restOptions } = column.options || {} return h(CTechMajorSelect, { value: text, size: 'small', allowClear: true, allowCustom: false, showSearch: false, customStyle: column.customStyle || { width: '100px' }, filterOption: (input, option) => { return ( option && option.label && option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ) }, ...restOptions, onChange: (techMajor) => { restOptions?.onChange?.(techMajor, record) record[column.dataIndex] = techMajor.value record['isEdit'] = true column['isEdit'] = true } }) } } class OrganizationCellRender { constructor(column) { this.column = column this.organizations = [] this.ajaxReq = undefined } async getOrganizations(column, _this) { if (_this.organizations.length > 0) { return _this.organizations } const props = column.options || {} const { getOrganizationList } = useOrganizationDropList() this.ajaxReq = this.ajaxReq || getOrganizationList(props.parameter) const response = await this.ajaxReq _this.organizations = response.map((item) => props.fieldNames && props.fieldNames instanceof Function ? props.fieldNames(item) : { label: props?.fieldNames?.label ? item[props.fieldNames.label] : item.name, value: props?.fieldNames?.value ? item[props.fieldNames.value] : item.id } ) return _this.organizations } async displayRender(args, column, data, _this) { const { text } = args if (column.formatter && column.formatter instanceof Function) { return column.formatter({ ...args, cellValue: args.text, row: args.record }) } else { const organizations = await _this.getOrganizations(column, _this) const item = organizations.find((x) => x.value === text) return item ? item.label : text } } editorRender({ text, record }, column, data, _this) { // eslint-disable-next-line no-unused-vars const { fieldNames, ...restOptions } = column.options || {} return h(COrganizationSelect, { value: text, size: 'small', allowClear: true, showSearch: false, fieldNames: fieldNames, customStyle: column.customStyle || { width: '100px' }, filterOption: (input, option) => { return ( option && option.label && option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ) }, ...restOptions, onChange: (orgValue, orgOrigin) => { restOptions?.onChange?.(orgOrigin, record) record[column.dataIndex] = orgValue record['isEdit'] = true column['isEdit'] = true } }) } } export default defineComponent({ name: 'CTable', components: { CTableMain, CToolbar }, props: { toolbar: { type: [Object, Boolean], default: () => ({ buttons: [] }) } }, emits: ['toolbar-button-click', 'change'], setup(props, { attrs, emit }) { provide('__crud_columns', attrs.columns) const tableRef = ref(null) const customType = { project: ProjectCellRender, employeeDescription: EmployeeCellRender, user: EmployeeCellRender, users: UsersCellRender, company: CompanyCellRender, cooperant: CooperantCellRender, buildCase: BuildCaseCellRender, organization: OrganizationCellRender, major: MajorCellRender, techMajor: TechMajorCellRender } const onToolbarClick = (value) => { //默认处理save delete事件 tableRef.value.commitProxy(value.code) emit('toolbar-button-click', value) } const onTableChange = (...arg) => { emit('change', ...arg) } //监听插槽的变化，记录修改项 const onEdit = (column, record) => { column.isEdit = true record.isEdit = true } return { tableRef, customType, onEdit, onTableChange, getTable: () => tableRef.value, onToolbarClick } } }) </script>
最新发布
09-12
好的，我现在需要解决用户的问题：在使用c-table组件时，调用cWorkSpaceTable.value.getUpdateRecords()方法时，新增的记录可以获取到，但编辑的行却无法获取到。用户已经提供了相关的代码片段，我需要仔细分析问题...
store.getModifiedRecords()
wshrpn的博客
08-02 527
store.getModifiedRecords()网页不刷新的话 会获取之前更改的消息   解决方法  在store的定义中 加入  pruneModifiedRecords:true,
Store提交和回滚
web开发
07-24 229
Store的提交和回滚类似于数据库中的commit、rollback，当客户端修改了一条Record的属性之后，这条Record记录和后台数据库中的实际数据就不一致了，此时的Record对象就成了"脏数据" commitChanges():void Commit all Records withoutstanding changes. To handle updates for...
bui框架与php结合,吐槽一下BUI的那些坑
weixin_39611754的博客
03-25 342
最近用了一个前端框架，使用起来有值得赞的地方，但也也有不少坑，不得不吐槽一下，以免小伙伴们重蹈覆辙。这框架就是BUIBUI是什么？据说BUI是某宝开发的一个前端框架，主要用来进行后台的搭建。上网搜索了一下，文档似乎很久没有维护了，已经长草。但看在现成的插件不少，看在项目时间紧的份上，姑且拿来用用。Paste_Image.png要损先夸，BUI有些地方还是挺好用的。赞一赞现成页面多这是一个亮点。对于...
ExtJS中Store的数据访问与更新问题
weixin_30414635的博客
07-30 560
　　可以使用add(Ext.data.Record[] records)或者add(Ext.data.Record record)向store末尾添加一个或多个record。如： 1varnewRecord=newPersonRecord({name:"Tom",age:22}); 2store.add(newRecord); 　　add函数会将新的数据添加到store...
ExtJS学习(四)EditorGrid可编辑表格
热门推荐
分享牛
03-12 2万+
操作表格有一种需求，要操作表格需要动态的添加内容，删除内容以及双击的时候进入编辑状态。这个时候怎么办呢，看具体的实现吧。 双击点击的时候可以单元格的操作。 代码：
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值