easyui 如何为标签动态追加属性实现渲染效果

简述一下在项目遇到的问题，这边有一个需求，选择不同类型，加载不同的div标签（其中属性是否必填是区分类型的关键）

html界面是这样的

<div class="grid_1 lbl">规则类型：</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">规则对象：</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: '正在加载数据...',url:'/api/Psb/PssValidateRule/GetBoClass',columns:[[{ field: 'MID', title: 'MID', width: 150 },{ field: 'CODENAME', title: '名称', width: 200 },{ field: 'FULLNAME', title: '对象全名', width: 200,hidden:true},{ field: 'TABLENAME', title: '对象名', width: 200,hidden:true},]],fitColumns: true,onSelect:onSelectSourceBill" /></div><div class="grid_1 lbl">计费对象：</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">开始数量：</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">规则条件：</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">计算函数：</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">结束数量：</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">计费单价：</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">超出单价：</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>

在选择规则类型时，动态隐藏显示divc层，当显示div层时，为div下的每个标签添加必填属性；反之，移除对应标签的必填属性

js方法

            //加载时，默认隐藏div$("#showDiv").attr("style", "display:none;");   //隐藏div  //获取规则类型var ruleType = @((int)Dxc.Persistent.DxcEnumCostRuleType.Change);  //变动//规则类型切换RuleTypeChange = function (newValue, oldValue) {//当规则类型是变动时if (newValue == ruleType) {$("#showDiv").attr("style", "display:block;");   //显示div     //jquery 动态追加属性（已追加，不渲染效果）//$('#boTable').attr("required",true);//easyui 动态追加属性$('#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 动态移除属性（已移除，不渲染效果）//$('#boTable').removeAttr("required");//easyui 动态移除属性$('#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的动态添加属性和移除属性，但是出现一种情况，debug查看页面是加上属性了，但是界面没有渲染，所以改用easyui的方式

切换界面效果

1）图1

2）图2

参考来源：

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

转载于:https://www.cnblogs.com/xielong/p/9921259.html

easyui 如何为标签动态追加属性实现渲染效果相关推荐

html的meta总结，html标签中meta属性使用介绍和动态替换字符串
http://www.haorooms.com/post/html_meta_ds http://www.haorooms.com/archives里面的东西比较多,需要细看一下 http://www ...
php点击后增加html元素,如何动态生成html元素以及为元素追加属性的方法介绍（附代码）...
本篇文章给大家分享的是关于如何动态生成html元素以及为元素追加属性的方法介绍(附代码),内容很不错,有需要的朋友可以参考一下,希望可以帮助到大家. 动态生成HTML元素的方法有三种: 第一种:doc ...
juqery追加li_jQuery添加li标签以及添加属性的方法
这次给大家带来jQuery添加li标签以及添加属性的方法,jQuery添加li标签以及添加属性的方法的注意事项有哪些,下面就是实战案例,一起来看一下. pageEncoding="UTF-8 ...
js动态修改html标签属性,通过js动态创建标签,并设置属性方法
当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了.这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个d ...
java 动态加载控件_JS动态添加节点后渲染为EasyUI控件，EasyUI动态渲染解析解决方案...
这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下. 这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$( ...
easyui tabs 的href和content属性
众所周知,jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:"href远程请求"和"content本地内容",本文就两种方式 ...
easyui输入框样式_EasyUI动态改变输入框width
easyui datagrid 动态改变大小 easyui datagrid 动态改变大小 EasyUi dialog 动态改变窗口大小我只是需要改变高度,所以我的代码如下:$('#editUnit ...
给Python的类和对象动态增加属性和方法
通常我们会将编程语言分为静态和动态.静态语言的变量是在内存中的有类型的且不可变化的,除非强制转换它的类型:动态语言的变量是指向内存中的标签或者名称,其类型在代码运行过程中会根据实际的值而定.Pytho ...
struts2原理分析之反射技术动态获取属性
反射技术动态获取属性知道struts2的流程的乡亲们都知道.struts2采用了动态获取属性的方法, 将表单里的数据传给了Action. 例如; 在struts2里有如下配置文件 <actio ...

easyui 如何为标签动态追加属性实现渲染效果

easyui 如何为标签动态追加属性实现渲染效果相关推荐

最新文章

热门文章