jqGrid连接/构建html标记不正确

时间:2010-06-15 21:17:05

标签: html jqgrid selection html-lists

请原谅这篇文章的篇幅,但我需要解释一下我所看到的内容。 我有一个onSelectRow选项,可以构建堆叠的html <li>标签(例如

<li>...</li>
  <li>...</li>
  <li>...</li>

)最多我正在查看的静态xml元素的数量。但我的脚本将所有图像src链接连接在一起,而不是构建整个listobject标记。我的jqGrid脚本中的其他所有内容都可以使用xml中重复元素的例外。

onSelectRow: function() {
    var gsr = $('#searchResults').jqGrid('getGridParam', 'selrow');
    if (gsr) {
     var data = $('#searchResults').jqGrid('getRowData', gsr);
    $('#thumbs ul').html('<li><a class='thumb' href='' + data.piclocation + '' title='' + data.pictitle + ''><img src='" + data.picthumb  + "' alt='" + data.pictitle + "' /></a><div class='caption'><div class='image-title'>" + data.pictitle + "</div></div></li>");
};"

我的xml文件是这样的:

<photo>
            <pic>
                <asset>weaponLib/stillMedia/slides/A106.jpg</asset>
                <thumb>weaponLib/stillMedia/thumbs/A106.jpg</thumb>
                <caption>Side view of DODIC A106</caption>
                <title>Side view of 22 caliber long rifle ball cartridge</title>
            </pic>
            <pic>
                <asset>weaponLib/stillMedia/slides/A106_A.jpg</asset>
                <thumb>weaponLib/stillMedia/thumbs/A106_A.jpg</thumb>
                <caption>Side view of DODIC A106</caption>
                <title>Side view of 22 caliber long rifle ball cartridge</title>
            </pic>
            <pic>
                <asset>weaponLib/stillMedia/slides/A106_B.jpg</asset>
                <thumb>weaponLib/stillMedia/thumbs/A106_B.jpg</thumb>
                <caption>Side view of DODIC A106</caption>
                <title>Side view of 22 caliber long rifle ball cartridge</title>
            </pic>
            <pic>
                <asset>weaponLib/stillMedia/slides/A106_C.jpg</asset>
                <thumb>weaponLib/stillMedia/thumbs/A106_C.jpg</thumb>
                <caption>Side view of DODIC A106</caption>
                <title>Side view of 22 caliber long rifle ball cartridge</title>
            </pic>
            <pic>
                <asset>weaponLib/stillMedia/slides/A106_D.jpg</asset>
                <thumb>weaponLib/stillMedia/thumbs/A106_D.jpg</thumb>
                <caption>Side view of DODIC A106</caption>
                <title>Side view of 22 caliber long rifle ball cartridge</title>
            </pic>

当我只看到一个序列时,我的脚本运行正常,但是当它看到多个序列时,它将所有html放在标签内,然后标题和标题对它们做同样的事情。它在上面的示例中只生成一个<li></li>标记集而不是5,就像我想要的那样。

幻灯片(带缩略图)实用程序正在使用<li>标记。

在萤火虫里面,我可以看到它为我建造的物体:

<a title="Side view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridge" href="weaponLib/stillMedia/slides/A106.jpgweaponLib/stillMedia/slides/A106_A.jpgweaponLib/stillMedia/slides/A106_B.jpgweaponLib/stillMedia/slides/A106_C.jpgweaponLib/stillMedia/slides/A106_D.jpg" class="thumb"><img alt="Side view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridgeSide view of 22 caliber long rifle ball cartridge" src="weaponLib/stillMedia/thumbs/A106.jpgweaponLib/stillMedia/thumbs/A106_A.jpgweaponLib/stillMedia/thumbs/A106_B.jpgweaponLib/stillMedia/thumbs/A106_C.jpgweaponLib/stillMedia/thumbs/A106_D.jpg"></a>

在jqGrid中,单元格持有:

<td title="weaponLib/stillMedia/slides/A106.jpgweaponLib/stillMedia/slides/A106_A.jpgweaponLib/stillMedia/slides/A106_B.jpgweaponLib/stillMedia/slides/A106_C.jpgweaponLib/stillMedia/slides/A106_D.jpg" style="text-align: center; display: none;" role="gridcell">weaponLib/stillMedia/slides/A106.jpgweaponLib/stillMedia/slides/A106_A.jpgweaponLib/stillMedia/slides/A106_B.jpgweaponLib/stillMedia/slides/A106_C.jpgweaponLib/stillMedia/slides/A106_D.jpg</td>

我知道jqGrid构建错误了。我对于解决它的方向感到困惑。任何建议都将非常感激。

1 个答案:

答案 0 :(得分:0)

在我看来,状态是

$('#thumbs ul').html('<li><a class='thumb' href='' + data.piclocation + '' title='' data.pictitle + ''><img src='" + data.picthumb  + "' alt='" + data.pictitle + "' /></a><div class='caption'><div class='image-title'>" + data.pictitle + "</div></div></li>");
onSelectRow内部的

应该稍微更改一下,以使用更多"代替'(或者您应该使用双'):

$('#thumbs ul').html("<li><a class='thumb' href='" +
                      data.piclocation + "' title='" + data.pictitle +
                      "'><img src='" + data.picthumb  +
                      "' alt='" + data.pictitle +
                  "' /></a><div class='caption'><div class='image-title'>" +
                   data.pictitle + "</div></div></li>");

你可以在stackoverflow.com上看到颜色,现在一切看起来都更正确了。