如何通过复选框的状态控制其他单元格是否可写



单元格是否可写是审核填报人是否有权限对报表做出修改的一个重要属性,同时还是衡量报表工具是否功能完善的一个重要指标。润乾报表不仅可以通过传参数的形式判断传入参数,在报表可写属性中根据不同的参数设置了不同的属性实现权限控制,还可以在页面上通过控件的状态判断单元格是否可写。下面就详细介绍一下如何通过复选框的状态控制单元格是否可写。

这个问题的实现思路是通过复选框的ID或NAME等唯一的属性找到复选框,判断其是否被选中,再根据其状态设置单元格是否可写。

第一步:制作一张填报表,如图所示:

将A2单元格设置为html数据类型,内容:="<inputid=testcheck"+row()+" type='checkbox' name='checkbox'onClick='test("+row()+");'/>"

将B2单元格设置为可写。

第二步:写JS判断A2的状态并设置B2是否可写。

<scriptlanguage="JavaScript">

functiontest(row){

varcheck = document.getElementById("testcheck");

varflag= row.toString();

varcheck = document.getElementById("testcheck"+flag);

var b= document.getElementById("report1_B"+flag);

if(check.checked){

b.writable= true;

//alert(check.value)

}else{

b.writable= false;

}

}

</script>

第三步:发布报表,预览效果。


上图实现的效果就是选中第复选款,姓氏列可以编辑,否则不可编辑。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在Vue框架中,可以通过v-model指令和数据绑定来实现框的状态与数据的同步。以下是一个实现表/不功能的代码示例: ```vue <template> <div> <table> <thead> <tr> <th> <input type="checkbox" v-model="selectAll" @change="selectAllRows"> </th> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr v-for="(row, index) in rows" :key="index"> <td> <input type="checkbox" v-model="row.checked"> </td> <td>{{ row.column1 }}</td> <td>{{ row.column2 }}</td> <td>{{ row.column3 }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { rows: [ { column1: "Row 1 Column 1", column2: "Row 1 Column 2", column3: "Row 1 Column 3", checked: false }, { column1: "Row 2 Column 1", column2: "Row 2 Column 2", column3: "Row 2 Column 3", checked: false }, { column1: "Row 3 Column 1", column2: "Row 3 Column 2", column3: "Row 3 Column 3", checked: false } ], selectAll: false }; }, methods: { selectAllRows() { for (let i = 0; i < this.rows.length; i++) { this.rows[i].checked = this.selectAll; } } }, watch: { rows: { handler(newVal) { const selectedRows = newVal.filter(row => row.checked); this.selectAll = selectedRows.length === newVal.length; }, deep: true } } }; </script> ``` 在上面的代码中,我们首先定义了一个表,其中包含一个表头和多个表行。在表头的第一列中,我们添加了一个全框,并将其与`selectAll`变量进行双向绑定。在表行中,我们使用`v-for`指令循环渲染每一行,并将每个框的状态与对应行的`checked`属性进行双向绑定。 在组件的`methods`项中,我们定义了一个名为`selectAllRows`的方法,该方法在全状态发生变化时被调用。该方法会遍历所有行,并将它们的`checked`属性设置为全框的状态。 最后,在组件的`watch`项中,我们监听了`rows`数组的变化。每当`rows`数组中任意一行的`checked`属性发生变化时,我们会重新计算已中行的数量,并根据已中行的数量来更新全框的状态。 这样,我们就实现了一个可以实现表/不功能的Vue组件。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值