easyui属性赋值

了解easyui tree组件的童鞋估计都知道tree的node有他自己单独的属性(id,text,iconCls,checked,state,attribute,target)。而原先这个几个属性想要通过html的方式赋值实例的话,是不能完全做到的。attribute属性必须json的方式才能赋值。这也给我们开发带来了一下不便。而如今有了data-options这个属性,一切问题都迎刃而解了。

定义一棵nide带有特殊属性的node就可以通过如下方式实现了

1    <ul id="tt1" class="easyui-tree" data-options="animate:true,dnd:true">
2            <li>
3                <span>Folder</span>
4                <ul>
5                    <li data-options="state:'closed'">
6                        <span>Sub Folder 1</span>
7                        <ul>
8                            <li data-options="attributes:{'url':'xxxxx'}">
1        <span><a href="#">File 11</a></span>
2    </li>
3    <li data-options="attributes:{'url':'xxxxx'}">
1                <span>File 12</span>
2            </li>
3            <li>
4                <span>File 13</span>
5            </li>
6        </ul>
7    </li>
8    <li data-options="attributes:{'url':'xxxxx'}">
1        <span>File 2</span>
2    </li>
3    <li data-options="attributes:{'url':'xxxxx'}">
01                    <span>File 3</span>
02                </li>
03                <li id="123" data-options="attributes:{'url':'xxxxx'}">File 4</li>
04                <li>File 5</li>
05            </ul>
06        </li>
07        <li>
08            <span>File21</span>
09        </li>
10    </ul>
 然后我们通过js方法获取到tree的node对象的时候 就可以直接node.attributes.url获取到相应的值了。

 

转载于:https://www.cnblogs.com/niubaba/p/9769476.html

### 设置 EasyUI Combobox 默认值或动态赋值 在使用 jQuery EasyUI 开发前端界面时,`combobox` 是一个常用的组件,常用于下拉选择框的展示和交互。针对设置默认值或动态赋值的需求,可以通过多种方式实现。 #### 在页面初始化时设置默认值 若需在页面加载完成后直接为 `combobox` 设置默认选中项,可以在 HTML 中定义 `<input>` 标签,并通过 JavaScript 初始化 `combobox` 时指定 `value` 属性。例如: ```html <input id="meteringType" class="easyui-combobox" name="meteringType" data-options="valueField:'id',textField:'text',url:'/api/meteringTypes.json',value:'daily'"> ``` 其中,`value:'daily'` 表示默认选中值为 `'daily'` 的选项。这种方式适用于数据源是远程 URL 的情况 [^1]。 #### 使用 JavaScript 动态设置值 对于需要根据业务逻辑动态设置默认值的情况,可以使用 JavaScript 调用 `combobox('setValue')` 方法。例如: ```javascript $('#meteringType').combobox('setValue', 'daily'); ``` 该方法适用于在页面加载完成之后,根据某些条件重新设置 `combobox` 的值。此外,也可以结合 `onLoadSuccess` 事件,在数据加载完成后进行赋值操作。例如: ```javascript onLoadSuccess: function(data) { var rows = $(this).datagrid("getRows"); for (var index = 0; index < rows.length; index++) { $(this).datagrid("beginEdit", index); if ($(this).datagrid("getEditor", {index:index, field:"subcontractingZb"}).target.combobox('getValue') == '') { $(this).datagrid("getEditor", {index:index, field:"subcontractingZb"}).target.combobox('setValue', "0"); } } } ``` 此方法通常用于在 `datagrid` 加载成功后,对其中某一列的 `combobox` 进行默认值设置 [^4]。 #### 结合模板数据源设置默认值 如果数据源是静态的,也可以在 HTML 中直接定义 `<select>` 元素并设置默认选中项。例如: ```html <select id="userType1"> <option value="1">系统管理员</option> <option value="2">普通管理员</option> </select> ``` 然后通过 JavaScript 设置默认值: ```javascript $("#userType1").val("1"); ``` 该方式适用于不需要异步加载数据的简单场景 [^2]。 #### 注意事项 - `combobox` 组件的 `value` 属性应在初始化时正确设置,否则可能导致默认值不生效。 - 在使用 `setValue` 方法时,应确保目标值存在于 `combobox` 的数据源中,否则可能无法正确显示。 - 若 `combobox` 嵌套在 `datagrid` 中,建议在 `datagrid` 的 `onLoadSuccess` 或 `onAfterEdit` 事件中进行赋值操作,以确保 DOM 已加载完毕 [^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值