表单元素编辑状态的修改方法:启用编辑/禁用编辑

本文详细介绍了如何使用JavaScript控制HTML表单元素的编辑状态,包括disabled和readonly属性的使用及区别。disabled适用于所有表单元素,阻止值的提交;readonly仅限于input和textarea,允许值的提交。

关于表单元素的编辑状态,js中可以进行随意修改其是否可编辑的状态

一.disabled属性:

  禁用状态的修改:

   1. $("#id").attr("disabled",true);

   2. $("#id")[0].disabled="true";

  启用状态的修改:

   $("#id").removeAttr("disabled");

 

 二.readonly属性:

  禁用状态的修改:

   1. $("#id").attr("readonly",true);

   2. $("#id")[0].readonly="true";

  启用状态的修改:

   $("#id").removeAttr("readonly");

 

disable和readonly的区别:

  1. readonly只针对input(text/password)和textarea有效,而disabled对于所有的表单元素有效,包括select,radio,checkbox,button等
  2. 在表单元素使用了disabled后,我们将表单以POST或者GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去

注意:注意:注意:

  • 在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时将属性设置为readonly
  • 当用户正式提交了表单后需要等待管理员的信息验证,不允许用户再更改表单中的数据,而是只能够查看,由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的是要将submit button也disabled掉,否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值会被清除
  • 在用户按了提交按钮后,利用javascript将提交按钮disabled掉,可防止在网络条件比较差的环境下,用户反复点击提交按钮导致数据冗余地存入数据库
<template> <sv-card> <sv-form ref="SvForm" :form.sync="form" :fieldList="fieldList" :formDisabled="formDisabled"> </sv-form> <!-- 按钮 --> <div style="margin-top: 10px; text-align: center"> <el-button v-if="butHidden" type="primary" class="filter-item" @click="handleSave">提交</el-button> <el-button type="primary" class="filter-item" @click="handleClose">取消</el-button> </div> </sv-card> </template> <script> import { addObj, getObj, putObj } from '@/views/server/bdBacklogInfo/api/index' export default { name: 'bdBacklogInfoDetails', data() { return { form: {}, // 表单是否禁用 formDisabled: true, fieldList: [ { type: 'text', label: '错误类型', prop: 'error', tooltip: '<li></li>' }, { type: 'text', label: '待办人账号', prop: 'userId', tooltip: '<li></li>' }, { type: 'text', label: '待办人', prop: 'userName', tooltip: '<li></li>' }, { type: 'text', label: '待办状态', prop: 'backlogStatus', tooltip: '<li></li>' }, { type: 'text', label: '待办完成时间', prop: 'backlogCompleteTime', tooltip: '<li></li>' }, { type: 'text', label: '周期', prop: 'cycle', tooltip: '<li></li>' }, { type: 'text', label: '租户Id', prop: 'tenantId', tooltip: '<li></li>' }, { type: 'text', label: '激活标识', prop: 'isActive', tooltip: '<li></li>' }, { type: 'text', label: '乐观锁标识', prop: 'version', tooltip: '<li></li>' }, { type: 'text', label: '扩张字段1', prop: 'ref1', tooltip: '<li></li>' }, { type: 'text', label: '扩张字段2', prop: 'ref2', tooltip: '<li></li>' }, { type: 'text', label: '扩张字段3', prop: 'ref3', tooltip: '<li></li>' }, { type: 'text', label: '扩张字段4', prop: 'ref4', tooltip: '<li></li>' }, { type: 'text', label: '扩张字段5', prop: 'ref5', tooltip: '<li></li>' }, { type: 'text', label: '扩张字段6', prop: 'ref6', tooltip: '<li></li>' }, { type: 'text', label: '扩张字段7', prop: 'ref7', tooltip: '<li></li>' }, { type: 'text', label: '扩张字段8', prop: 'ref8', tooltip: '<li></li>' }, { type: 'text', label: '创建人', prop: 'crtUserName', tooltip: '<li></li>' }, { type: 'text', label: '创建人ID', prop: 'crtUserId', tooltip: '<li></li>' }, { type: 'text', label: '创建时间', prop: 'crtTime', tooltip: '<li></li>' }, { type: 'text', label: '最后更新人', prop: 'updUserName', tooltip: '<li></li>' }, { type: 'text', label: '最后更新人ID', prop: 'updUserId', tooltip: '<li></li>' }, { type: 'text', label: '最后更新时间', prop: 'updTime', tooltip: '<li></li>' } ], // 是否显示功能按钮 butHidden: true } }, props: { // 父页面数据 // 数据id id: { type: String }, // 明细页面操作标识:新增-create、修改-update、查看-view dialogDetailsStatus: { type: String }, // 弹出框打开关闭标识 dialogDetailsVisible: { type: Boolean } }, computed: {}, watch: {}, created() { this.initData() }, methods: { // 初始化 async initData() { // 获取表单数据 if (this.dialogDetailsStatus !== 'create') { if (this.id) { getObj(this.id).then(res => { this.form = res.data }) } } // 控制表单禁用 if (this.dialogDetailsStatus !== 'view') { // 查看页面禁用所有标签 this.formDisabled = false this.butHidden = true } // 创建初始默认值设定 if (this.dialogDetailsStatus === 'create') { this.form.isActive = '1' this.form.status = '1' } }, // 保存 async handleSave() { // 校验表单 if (!this.$refs.SvForm.validate()) return if (this.dialogDetailsStatus === 'update') { const response = await putObj(this.id, this.form) if (response.success) { this.$notify({ title: '提示', message: '修改成功', type: 'success', duration: 2000 }) // 关闭弹窗 this.$emit('handleCloseDetailsDialog') } } else if (this.dialogDetailsStatus === 'create') { const response = await addObj(this.form) if (response.success) { this.$notify({ title: '提示', message: '创建成功', type: 'success', duration: 2000 }) // 关闭弹窗 this.$emit('handleCloseDetailsDialog') } } }, // 关闭页面 handleClose() { // 调用父组件方法 this.$emit('handleCloseDetailsDialog') } } } </script> <style lang="scss" scoped> ::v-deep .text-type-class .el-input__inner { background-color: pink; } </style> <template> <div class="app-container"> <sv-search-table ref="SvSearchTable" :tableIndex="true" :singleSelect="true" :api="customPage" :data.sync="tableInfo.data" :field-list="tableInfo.fieldList" moduleName="bdBacklogInfo" module="bdBacklogInfo" @selection-change="selectionChange" > <!-- 自定义按钮 --> <el-button type="primary" class="filter-item" @click="columnsSettings">列设置</el-button> <el-button type="primary" class="filter-item" @click="resetColumnSettings">重置列设置</el-button> <el-button type="primary" class="filter-item" @click="exportCurrentPage">导出本页</el-button> <el-button type="primary" class="filter-item" @click="exportExcel">导出全部</el-button> <el-button type="primary" v-for="item in btList" :key="item.event" @click="handleClick(item.event)" >{{ item.label }} </el-button> </sv-search-table> <!-- 详情信息弹窗 --> <el-dialog :title="dialogTitle" :visible.sync="dialogDetailsVisible" :close-on-click-modal="false"> <details-pop v-if="dialogDetailsVisible" :id="id" :dialogDetailsStatus="dialogDetailsStatus" :dialogDetailsVisible="dialogDetailsVisible" @cancel="dialogDetailsVisible = false" @handleCloseDetailsDialog="handleCloseDetailsDialog" ></details-pop> </el-dialog> </div> </template> <script> import { delObj, customPage, efficient, invalid } from '@/views/server/bdBacklogInfo/api/index' import { mapGetters } from 'vuex' export default { name: 'bdBacklogInfo', components: { // 加载子组件 'details-pop': () => import('../bdBacklogInfo/details.vue') }, data() { return { customPage, tableInfo: { data: [], fieldList: [ { inputType: 'input', prop: 'id', label: 'Id', hidden: true, inputHidden: true }, { inputType: 'input', prop: 'cuowuxinxi', label: '错误类型', hidden: false }, { inputType: 'input', prop: 'userId', label: '待办人账号', hidden: false }, { inputType: 'input', prop: 'userName', label: '待办人', hidden: false }, { inputType: 'input', prop: 'backlogStatus', label: '待办状态', hidden: false }, { inputType: 'input', prop: 'backlogCompleteTime', label: '待办完成时间', hidden: false }, { inputType: 'input', prop: 'cycle', label: '周期', hidden: false }, { inputType: 'input', prop: 'crtUserName', label: '创建人', hidden: false } ] }, // 页面操作按钮 btList: [ // { // label: '新增', // event: 'create' // }, // { // label: '修改', // event: 'update' // }, // { // label: '查看', // event: 'view' // }, // { // label: '启用', // event: 'efficient' // }, // { // label: '停用', // event: 'invalid' // }, // { // label: '删除', // event: 'del' // } ], // 选中行数据 currentRow: undefined, // 跳转详情数据的id id: '', // 详情页面标题 dialogTitle: '', // 详情页面的操作类型 dialogDetailsStatus: 'view', // 详情页面打开控制 dialogDetailsVisible: false } }, created() { // 加载按钮权限 // this.btList = this.btList.filter(item => // if (item.event === 'create') { // return this.elements['ewModel:btn_create'] // } // true // ) return true }, computed: { ...mapGetters(['elements']) }, methods: { getList() { // 获取表格数据 this.$refs.SvSearchTable.getList() }, // 选中行 selectionChange(row) { this.currentRow = row }, // 校验选择行数据:event-操作类型 chooseOne-是否控制只能选择一条 handleCheckSelect(event) { if (this.currentRow === null || this.currentRow === undefined || this.currentRow.length === 0) { if (event === 'create') return false if (event === 'update' || event === 'view' || event === 'efficient' || event === 'invalid' || event === 'del') { this.$notify({ title: this.$t('common.message.error'), message: '最少选择一条数据进行操作', type: 'error', duration: 2000 }) } return true } return false }, // 操作列按钮,event事件,data行数据 handleClick(event) { if (this.handleCheckSelect(event)) return switch (event) { case 'create': this.handleDetails(event) break case 'update': this.handleDetails(event) break case 'view': this.handleDetails(event) break case 'efficient': this.handlEefficient(event) break case 'invalid': this.handlInvalid(event) break case 'del': this.handlDel(event) break default: break } }, handleDetails(event) { // 详情页面 if (event === 'view') { this.dialogTitle = '查看' this.dialogDetailsStatus = 'view' } else if (event === 'update') { this.dialogDetailsStatus = 'update' this.dialogTitle = '修改' } else if (event === 'create') { this.dialogDetailsStatus = 'create' this.dialogTitle = '创建' } // 传递选中的列表数据主键id this.id = this.currentRow ? this.currentRow.id : null // 打开明细页面 this.dialogDetailsVisible = true }, // 关闭详情页面 handleCloseDetailsDialog() { this.dialogDetailsVisible = false if (this.dialogDetailsStatus !== 'view') { this.getList() } }, async handlEefficient() { // 生效 const response = await efficient(this.currentRow.id) if (response.success) { this.$notify({ title: '提示', message: '操作成功', type: 'success', duration: 2000 }) this.getList() } }, async handlInvalid() { // 失效 const response = await invalid(this.currentRow.id) if (response.success) { this.$notify({ title: '提示', message: '操作成功', type: 'success', duration: 2000 }) this.getList() } }, async handlDel() { // 删除 this.$confirm('此操作将永久删除, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { delObj(this.currentRow.id).then(response => { if (response.success) { this.$notify({ title: '提示', message: '操作成功', type: 'success', duration: 2000 }) this.getList() } }) }) }, // 打开列设置,需要和module一起使用 columnsSettings() { this.$refs.SvSearchTable.columnsSettings() }, // 重置列设置 resetColumnSettings() { this.$refs.SvSearchTable.resetColumnSettings() }, // 导出全部数据,需要传maxExportRows,默认是10000条,如果数据过多建议后台导出。 // 默认用的是分页方法,如果有自定义导出方法用exportApi传入 exportExcel() { this.$refs.SvSearchTable.exportExcel() }, // 导出当前页数据 exportCurrentPage() { this.$refs.SvSearchTable.exportCurrentPage() } } } </script>import request from '@/utils/request' export function page(query) { return request({ url: '/api/server/bdBacklogInfo/page', method: 'get', params: query }) } export function customPage(query, queryList) { return request({ url: '/api/server/bdBacklogInfo/customPage', method: 'post', params: query, data: queryList }) } export function addObj(obj) { return request({ url: '/api/server/bdBacklogInfo', method: 'post', data: obj }) } export function getObj(id) { return request({ url: '/api/server/bdBacklogInfo/' + id, method: 'get' }) } export function delObj(id) { return request({ url: '/api/server/bdBacklogInfo/' + id, method: 'delete' }) } export function putObj(id, obj) { return request({ url: '/api/server/bdBacklogInfo/' + id, method: 'put', data: obj }) } export function efficient(id, obj) { return request({ url: '/api/server/bdBacklogInfo/efficient/' + id, method: 'put', data: obj }) } export function invalid(id, obj) { return request({ url: '/api/server/bdBacklogInfo/invalid/' + id, method: 'put', data: obj }) } 哪里做了增删改查的那些操作,讲一下
最新发布
08-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_格鲁特宝宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值