在ext中如何动态设置checkbox的checked属性!

Posted 2023-05-05

我是用循环根据后台返回数据动态创建多个checkbox的 （默认为未选），还要在窗口显示前 根据又一个后台请求返回数据来初始化这些复选框的选中状态，可是我在窗口的show监听事件中 用 获取到的对象.checked=true;没用啊 ，即窗口显示后 里面的checkbox还是没选中 ，这要怎么动态设置为选中状态？

非常急，敬请高手指教！

参考技术A 首先你要请确保每一个checkbox都有一个唯一的id，例如：
boxLabel : '新增',
id:"add",
anchor:"50%",
name : '新增'

Ext.getCmp.setValue(true);设置为选中状态
Ext.getCmp.setValue(false);设置为未选中状态 参考技术B 如果是树的话
var node = ptree.getNodeById(store.getAt(i).get('id'));//获取节点
node.getUI().checkbox.checked = true; 参考技术C Ext.onReady(function()
/*
转换数据库数据，判断是否选中
*/
function convertData(initData,valueData)
var items = new Array();
for(var i=0;i<initData.length;i++)
var temp=initData[i];
items[i]=name:'hobby',boxLabel:temp.dis,inputValue:temp.val,checked:isContains(valueData,temp.val);//checked属性给的是定义的函数

return items;

/*
判断是否改选中。是返回true，否返回false
*/
function isContains(data,val)
var r = false;
for(var i=0;i<data.length;i++)
if(hobby[i]==val)
r=true;
break;


return r;


var initData=[val:'zq',dis:'足球',val:'lq',dis:'篮球',val:'ppq',dis:'乒乓球',val:'wq',dis:'网球'];//模拟数据库数据
var hobby=['zq','ppq'];//需要选中的数组，如果返回的是字符串的话转换成数组就行了
var itemsData=convertData(initData,hobby);//通过convertData(initData,valueData)函数将数据库数据转换成CheckboxGroup需要的数据
/*
创建CheckboxGroup
*/
var cgp = new Ext.form.CheckboxGroup(
fieldLabel:'爱好',
items:itemsData
);

/*
创建Form并渲染到页面
*/
var form = new Ext.form.FormPanel(
renderTo:'my_orm',
frame:true,
items:[cgp]
);
);
我刚写好的，不知道是不是最好的本回答被提问者采纳

如何动态更改 ion-checkbox 中 [checked] 属性的值？

【中文标题】如何动态更改 ion-checkbox 中 [checked] 属性的值？

【英文标题】：How do I dynamically change the value of [checked] property in ion-checkbox?

【发布时间】：2021-11-21 03:28:20

【问题描述】：

<ion-list lines='full'>
  <ng-container *ngFor="let item of data">
  <ion-item>
      <ion-label class="ion-text-wrap">
           item.Title
      </ion-label>
      <ion-checkbox slot="end"
      (ionChange)="onDataCheckBoxChange(item.Id, $event)" 
      [checked]="item.selected"  
      ></ion-checkbox>
  </ion-item>  
  </ng-container>
</ion-list>

现在在 ngOnInit() 我返回一个项目 ID 数组，即 1,23,4,5,6 等

现在，如果item.Id 在我返回的items ids 数组中，我希望选择[checked] 属性。

所以，到目前为止，我已经尝试在复选框上创建另一个循环，但它会重复所有复选框。

我怎样才能做到这一点？

【问题讨论】：

我无法完全理解，您的项目现在是数字 (1,2,3,4,5,6,...) 还是对象？什么时候设置item.selected？

只是数字数组而已。

【参考方案1】：

我对 ion 了解不多，但我的方法是编写一个函数，如果复选框的 id 在数组中，则返回 true，如下所示：

isChecked(itemId) 
    return (checkedIds.find((id) => id === itemId) !== undefined ? true : false);

然后在复选框上调用它

编辑：这是假设您的 id 是数字

Edit2：也许你可以使用SelectionModel。

【讨论】：

但在 changedetector 中这将是一个问题。

【参考方案2】：

您可以做的是将数字数组（例如1,2,3,4,5, ...）映射到对象数组（例如[ id: 1, selected: true , id: 2, selected: false, id: 2, selected: true , ...]），然后更新onDataCheckBoxChange函数中的选定值。

ngOnInit() 
  ...
  // this.selectedIds: number[] - contains the initially selected ids
  // numbers: number[] - contains all the numbers e.g. [1,2,3, ...]
  this.data = numbers.map((id: number) => ( id: id, selected: this.selectedIds.includes(id));


onDataCheckBoxChange(itemId: number, checked: boolean) 
  if ( checked ) 
    this.selectedIds.push(itemId);
   else 
    this.selectedIds = this.selectedIds.filter((id: number) => id !== itemId);
  
  this.data.find((item) => item.id === itemId).selected = checked;

【参考方案3】：

您只需要创建数组并传递 true 或 false 等值，因为 ion-checkbox 只接受 true 或 false。

demoArr: any = [
 id: 1, selected: true ,
 id: 2, selected: false ,
 id: 3, selected: true ,];

在 html 端这样做，你会得到你的输出。

我分叉了演示示例，您可以在这里查看： https://stackblitz.com/edit/ionic-qzpmhu?file=app/main.ts