jQuery MiniUI

标题: 关于动态追加 Html 样式混乱的问题 [打印本页]

作者: randy 时间: 2012-12-7 11:26:26 标题: 关于动态追加 Html 样式混乱的问题

我用了 mini-spinner 这个控件并监控他的值改变的方法来动态生成后面的一些HTml !
我先将那一段 THML 代码拼装好了在追加的时候用了这个方法：$("#addHtml").html(entry);
但是追加出来后的效果就是样式混乱了！不知道你们MiniUI 有没有封装什么追加的方法呢？

作者: factory 时间: 2012-12-7 14:04:28

添加的HTML是什么？miniui的HTML还是HTML原生的？

作者: niko 时间: 2012-12-7 14:34:22

动态插入html后，如果需要将html转换为miniui控件，需要：mini.parse();

作者: randy 时间: 2012-12-9 22:25:26

factory 发表于 2012-12-7 14:04
添加的HTML是什么？miniui的HTML还是HTML原生的？

插入的是miniUI Html 如果在添加的时候用的是$("#addhtml").appent(。。。) 进行动态追加miniUI Html miniUI 样式是不会出现样式的错乱！但是会出现一个问题就是每次都没法清空之前动态添加的Html 所以就要换成 .html（...）的方法进行每次都动态的替换生成动态Html 代码，就会出现 miinUI 样式的错乱

作者: randy 时间: 2012-12-9 22:26:17

factory 发表于 2012-12-7 14:04
添加的HTML是什么？miniui的HTML还是HTML原生的？

作者: randy 时间: 2012-12-9 22:26:50

niko 发表于 2012-12-7 14:34
动态插入html后，如果需要将html转换为miniui控件，需要：mini.parse();

已经用了你们miniUI 的那样渲染的方法了！

作者: randy 时间: 2012-12-11 16:46:52

管理员你们咋不重视下这种情况呢？我将图跟代码都贴出来给你们！希望你们能正视这个样式混乱的问题：[attach]1084[/attach]<tr>....</tr>

<tr style="width:100%;border:10px solid #000000;" id="addHtml">
            <td><input  name="name1" textName="sectionTypeName1" class="mini-buttonedit" style="width:100%;"       /></td>
            <td style="width:150px;"><input name="latPos1" class="mini-spinner"  minValue="0" maxValue="3"/></td>
            <td style="width:150px;"><input name="longPosition1" class="mini-spinner"  minValue="0" maxValue="10"/></td>
            <td style="width:150px;"><input name="crossNumber1" class="mini-spinner"  minValue="0" maxValue="10"/></td>
            <td style="width:150px;"><input name="hangNumber1" class="mini-spinner"  minValue="0" maxValue="10"/></td>
         </tr>

<tr>....</tr>

function spinnerchage_Number(){
         var X_Obj = mini.get("hengxiangNumber");
         var Y_Obj = mini.get("zongxiangNumber");
         var allNumber=parseInt(X_Obj.getValue()*Y_Obj.getValue());
         alert("hangNumber"+allNumber);
         var ff = mini.get("hangNumber"+allNumber);
         var entry="";
         for(var i=1;i<allNumber;i++){
         entry+="<tr style='width:100%;border:10px solid #000000;'>"
         entry+="<td><input name='name'"+i+" class='mini-buttonedit' style='width:100%;' onbuttonclick='onButtonEdit'/></td>"
         entry+="<td style='width:150px;'><input name='latPos'"+i+" class='mini-spinner'  minValue='0' maxValue='10'/></td>"
         entry+=" <td style='width:150px;'><input name='longPosition'"+i+" class='mini-spinner'  minValue='0' maxValue='10'/></td>"
         entry+="<td style='width:150px;'><input name='crossNumber'"+i+" class='mini-spinner' minValue='0' maxValue='10'/></td>"
         entry+=" <td style='width:150px;'><input id='hangNumber'"+i+" name='hangNumber'"+i+" class='mini-spinner' minValue='0' maxValue='10'/></td>"
         entry+="</tr>"
            }
         $("#addHtml").html(entry);
            mini.parse();
      }

作者: randy 时间: 2012-12-11 16:49:11

下面的一个图是用了 js 的 $("#addHtml").apent(entry); 的方法但是会出现没法每次都将旧的那些<tr> 删除掉

作者: randy 时间: 2012-12-11 16:51:28

这个问题一直都没有解决！很痛苦啊.......

作者: factory 时间: 2012-12-11 17:03:38

randy 发表于 2012-12-11 16:51
这个问题一直都没有解决！很痛苦啊.......

你最好把你的页面打包上传一下，这样真的很难看。
table布局，我看你的一张图，是不是你的table的td的宽度没设置好啊，右边部分都被挤错位了

作者: randy 时间: 2012-12-12 08:47:35

factory 发表于 2012-12-11 17:03
你最好把你的页面打包上传一下，这样真的很难看。
table布局，我看你的一张图，是不是你的table的td的宽 ...

[attach]1085[/attach] 版主页面已经打包上传了！

作者: factory 时间: 2012-12-12 09:31:32

本帖最后由 factory 于 2012-12-12 09:36 编辑

randy 发表于 2012-12-12 08:47
版主页面已经打包上传了！

你的页面里的spinnerchage_Number方法是哪里执行的？
你给的页面上面好像没有执行这个方法的

可以了，我给你看看

作者: randy 时间: 2012-12-12 09:56:14

factory 发表于 2012-12-12 09:31
你的页面里的spinnerchage_Number方法是哪里执行的？
你给的页面上面好像没有执行这个方法的

这个是添加在
<tr style="width:100%;border:1px solid #F0F0F0;">
            <td style="width:80px;">横向栏目数：</td>
            <td style="width:150px;"><input name="hNum" class="mini-spinner"  minValue="1" maxValue="10" /></td>
         </tr>

         <tr style="width:100%;border:1px solid #F0F0F0;">
            <td style="width:80px;">纵向栏目数：</td>
            <td style="width:150px;"><input name="vNum" class="mini-spinner"  minValue="1" maxValue="10"/></td>
         </tr>
这两个的值改变事件上面的我暂时去掉了

作者: factory 时间: 2012-12-12 10:27:25

randy 发表于 2012-12-12 09:56
这个是添加在

横向栏目数：

[attach]1086[/attach]、
你要的是这样的吧，我一会把我给你修改好的页面上传上来

作者: factory 时间: 2012-12-12 10:33:45

我给你修改了几处地方：
1.我在最外层的table上多加了一个tr，里面放了5个td，分别给了宽度，但是没有内容的。这样下面其他的tr的td宽度不需要给定，都是按照这个tr里面的td的宽度来设定的了。
2.你的新增的tr里面，我给你多加了一个table，我估计jquery的增加HTML字符串的方法应该就是用innerHTML来添加的，但是tr的innerHTML只能读取，不能赋值，只有td才能给innerHTML，所以我帮你把拼接字符串的那段代码改成了insertRow()和insertCell()来添加tr跟td，然后再字符串添加里面的内容。

具体你看下我给你的页面吧，说可能说得不是太清楚，反正我这边运行已经没有问题了，你在你那边跑跑看是否有问题，有问题的话我再给你看看
[attach]1087[/attach]

作者: randy 时间: 2012-12-12 10:39:30

factory 发表于 2012-12-12 10:33
我给你修改了几处地方：
1.我在最外层的table上多加了一个tr，里面放了5个td，分别给了宽度，但是没有内容 ...

嗯我先看看先

作者: randy 时间: 2012-12-12 10:57:17

factory 发表于 2012-12-12 10:33
我给你修改了几处地方：
1.我在最外层的table上多加了一个tr，里面放了5个td，分别给了宽度，但是没有内容 ...

版主！我看了你修改后的效果了！那个只用追加的效果每一次的值改变都会去动态的去追加跟我之前用
$（#addHtml）.append（。。。。）的效果一样但是就没法做到每一次动态添加之前都将已经存在的清空掉....

作者: factory 时间: 2012-12-12 11:20:03

randy 发表于 2012-12-12 10:57
版主！我看了你修改后的效果了！那个只用追加的效果每一次的值改变都会去动态的去追加跟我之前用
$（ ...

那你就先在添加前，清空下table的tr，tb.deleteRow(index);
遍历一下吧，因为用$("#addHtml").html(entry);好像一直都会错位

作者: randy 时间: 2012-12-12 11:20:59

factory 发表于 2012-12-12 11:20
那你就先在添加前，清空下table的tr，tb.deleteRow(index);
遍历一下吧，因为用$("#addHtml").html(entry ...

嗯好的我先试试

作者: windsix 时间: 2012-12-12 13:43:56

我晕，直接在一个tr中放tr，你这不乱才奇怪了。

这个东西跟miniui一点关系都没有，$("#addHtml").html(entry);相当于在id为addHtml的那个tr中innerhtml，你说你addHtml的对象为tr能直接嵌tr吗？还多行呢。

直接用ie的开发者工具或者chrome的审查元素查看下生成后的页面html代码结构就可以很快知道问题原因了。

作者: randy 时间: 2012-12-12 15:37:42

windsix 发表于 2012-12-12 13:43
我晕，直接在一个tr中放tr，你这不乱才奇怪了。

这个东西跟miniui一点关系都没有，$("#addHtml").html(ent ...

$("#addHtml").html(enty) 是要替换掉原来的那个 Id为 addHtml <tr> 我将动态的生成的Html 替换掉那个 <tr> 有什么不对？还有就是你说我将动态的Html 插入到<tr> 里面那是另一个属性 $("#addHtml").append（enty）这一个属性才是将动态的Html 追加到 Id 为 addHtml的 <tr> 里面？懂么？

作者: windsix 时间: 2012-12-12 16:13:38

randy 发表于 2012-12-12 15:37
$("#addHtml").html(enty) 是要替换掉原来的那个 Id为 addHtml 我将动态的生成的Html 替换掉那个有什 ...

$("#addHtml").html(enty)是不会把自己换掉的呀，只是把enty的html代码替换"#addHtml"这个tr内部的代码而已

作者: randy 时间: 2012-12-12 17:40:27

windsix 发表于 2012-12-12 16:13
$("#addHtml").html(enty)是不会把自己换掉的呀，只是把enty的html代码替换"#addHtml"这个tr内部的代码而 ...

但是我试过在 <div id="addHtml"></div> 这个样子还是会乱的

作者: windsix 时间: 2012-12-12 18:04:31

randy 发表于 2012-12-12 17:40
但是我试过在这个样子还是会乱的

哎，tr能放在什么里面，你要是用html(),那你addHtml这个当然只能是table了。你要做的就是要让加入的html结构不能影响外部的结构呀。

作者: guoweidong 时间: 2012-12-12 20:41:07

windsix 发表于 2012-12-12 18:04
哎，tr能放在什么里面，你要是用html(),那你addHtml这个当然只能是table了。你要做的就是要让加入的html ...

我感觉把问题考虑复杂了，直接在DIV操作不就行了。把Table用字符串拼接附到DIV上。每次清空DIV重新附值。

作者: randy 时间: 2012-12-13 10:40:34

factory 发表于 2012-12-12 11:20
那你就先在添加前，清空下table的tr，tb.deleteRow(index);
遍历一下吧，因为用$("#addHtml").html(entry ...

版主 var tb1 = document.getElementById("tb2");
tb1.deleteRow(index);
我在每次之前都需要情况下table 我想问下 deleteRow(..)里面的参数传的是什么？

作者: factory 时间: 2012-12-13 10:59:26

randy 发表于 2012-12-13 10:40
版主 var tb1 = document.getElementById("tb2");
tb1.deleteRow(index);
我在每次之前都 ...

索引，指定了删除行的位置
var tb = document.getElementById("tb");
var length = tb.childNodes[0].childNodes.length;
for(var i=length-1;i>=0;i--){
tb.deleteRow(i);
}

作者: randy 时间: 2012-12-13 11:03:59

factory 发表于 2012-12-13 10:59
索引，指定了删除行的位置
var tb = document.getElementById("tb");
var length = tb.childNodes[0] ...

嗯好的谢谢版主

作者: randy 时间: 2012-12-13 13:48:00

factory 发表于 2012-12-13 10:59
索引，指定了删除行的位置
var tb = document.getElementById("tb");
var length = tb.childNodes[0] ...

灰常感谢版主！问题已经解决了！

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)