簡(jiǎn)述一下在項(xiàng)目遇到的問(wèn)題，這邊有一個(gè)需求，選擇不同類型，加載不同的div標(biāo)簽（其中屬性是否必填是區(qū)分類型的關(guān)鍵）

html界面是這樣的

<div class="grid_1 lbl">規(guī)則類型：</div> <div class="grid_3 val"><input type="text" data-bind="comboboxValue:form.RULETYPE, datasource:dataSource.RuleTypes,comboboxReadOnly:readonly" data-options="onChange:RuleTypeChange"
class="z-txt easyui-combobox" required="true" /></div> <div class="clear"></div>
<div id="showDiv"><div class="grid_1 lbl">規(guī)則對(duì)象：</div><div class="grid_3 val"><input id="boTable" data-bind="combogridValue:form.BOCLASS,combogridReadOnly:readonly" class="z-txt easyui-combogrid"data-options="panelWidth:600, mode: 'remote', rownumbers:true,idField:'MID',textField:'CODENAME',pagination:true,method: 'get',loadMsg: '正在加載數(shù)據(jù)...',url:'/api/Psb/PssValidateRule/GetBoClass',columns:[[{ field: 'MID', title: 'MID', width: 150 },{ field: 'CODENAME', title: '名稱', width: 200 },{ field: 'FULLNAME', title: '對(duì)象全名', width: 200,hidden:true},{ field: 'TABLENAME', title: '對(duì)象名', width: 200,hidden:true},]],fitColumns: true,onSelect:onSelectSourceBill" /></div><div class="grid_1 lbl">計(jì)費(fèi)對(duì)象：</div><div class="grid_3 val"><input id="boField" data-bind="combogridValue:form.BOFIELD,combogridReadOnly:readonly" class="z-txt easyui-combogrid" /></div><div class="grid_1 lbl">開(kāi)始數(shù)量：</div><div class="grid_3 val"><input id="beginNum" type="text" data-bind="numberboxValue:form.BEGINNUM,numberboxReadOnly: readonly" class="z-txt easyui-numberbox" data-options="min: 0, precision: 0" /></div><div class="clear"></div><div class="grid_1 lbl">規(guī)則條件：</div><div class="grid_3 val"><input id="costWhere" type="text" data-bind="value:form.COSTWHERE,readOnly:readonly" class="z-txt easyui-validatebox" /></div><div class="grid_1 lbl">計(jì)算函數(shù)：</div><div class="grid_3 val"><input id="costMethod" type="text" data-bind="value:form.COSTMETHOD,readOnly:readonly" class="z-txt easyui-validatebox" /></div><div class="grid_1 lbl">結(jié)束數(shù)量：</div><div class="grid_3 val"><input id="endNum" type="text" data-bind="numberboxValue:form.ENDNUM,numberboxReadOnly: readonly" class="z-txt easyui-numberbox" data-options="min: 0, precision: 0" /></div><div class="clear"></div></div><div class="grid_1 lbl">計(jì)費(fèi)單價(jià)：</div> <div class="grid_3 val"><input type="text" data-bind="numberboxValue:form.COSTPRICE,numberboxReadOnly: readonly" class="z-txt easyui-numberbox" data-options="min: 0, precision: 2" required="true" /></div><div class="grid_1 lbl">超出單價(jià)：</div><div class="grid_3 val"><input type="text" data-bind="numberboxValue:form.OVERPRICE,numberboxReadOnly: readonly" class="z-txt easyui-numberbox" data-options="min: 0, precision: 2" /></div><div class="clear"></div>

在選擇規(guī)則類型時(shí)，動(dòng)態(tài)隱藏顯示divc層，當(dāng)顯示div層時(shí)，為div下的每個(gè)標(biāo)簽添加必填屬性；反之，移除對(duì)應(yīng)標(biāo)簽的必填屬性

js方法

//加載時(shí)，默認(rèn)隱藏div$("#showDiv").attr("style", "display:none;"); //隱藏div //獲取規(guī)則類型var ruleType = @((int)Dxc.Persistent.DxcEnumCostRuleType.Change); //變動(dòng)//規(guī)則類型切換RuleTypeChange = function (newValue, oldValue) {//當(dāng)規(guī)則類型是變動(dòng)時(shí)if (newValue == ruleType) {$("#showDiv").attr("style", "display:block;"); //顯示div //jquery 動(dòng)態(tài)追加屬性（已追加，不渲染效果）//$('#boTable').attr("required",true);//easyui 動(dòng)態(tài)追加屬性$('#boTable').combogrid({required:true});$('#boField').combogrid({required:true});$('#beginNum').numberbox({required:true});$('#endNum').numberbox({required:true});$('#costWhere').validatebox({required:true});$('#costMethod').validatebox({required:true});}else{$("#showDiv").attr("style", "display:none;"); //隱藏div //jquery 動(dòng)態(tài)移除屬性（已移除，不渲染效果）//$('#boTable').removeAttr("required");//easyui 動(dòng)態(tài)移除屬性$('#boTable').combogrid({required:false});$('#boField').combogrid({required:false});$('#beginNum').numberbox({required:false});$('#endNum').numberbox({required:false});$('#costWhere').validatebox({required:false});$('#costMethod').validatebox({required:false});}}

注意：原先考慮用jquery的動(dòng)態(tài)添加屬性和移除屬性，但是出現(xiàn)一種情況，debug查看頁(yè)面是加上屬性了，但是界面沒(méi)有渲染，所以改用easyui的方式

切換界面效果

1）圖1

2）圖2

參考來(lái)源：

http://www.mamicode.com/info-detail-2243131.html

轉(zhuǎn)載于:https://www.cnblogs.com/xielong/p/9921259.html

總結(jié)

以上是生活随笔為你收集整理的easyui 如何为标签动态追加属性实现渲染效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。