我应该使用jquery中的什么插件或哪个插件来用xml文件内容填充html表
What or which plugin in jquery shall i use to populate a html table with a xml file content?
我需要将来自服务器的xml文件(类似files/client.xml
的文件路径)中的数据显示到html表或数据网格中,我应该使用哪个插件,或者更确切地说应该使用什么插件,以便它具有可变分页、过滤器和表css自定义。任何建议都会有所帮助,一个小例子对我来说应该是一个加分项:)谢谢
注意:我的xml结构是固定的
<?xml-stylesheet type="text/xsl" href="csmclientiir.xsl"?>
<csmclient product="abc" date="4/26/11 2:05 PM">
<system>
<osname>Linux
</osname>
<hostname>AbhishekNix
</hostname>
<release>2.6.18-128.el5
</release>
<filesystem>
<file mount='/home/hp1' home='(innfs2:/vol/home/shome/home/hp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
<file mount='/home/par21' home='(innfs2:/vol/home/shome/home/par21)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
<file mount='/home/h231' home='(innfs2:/vol/home/shome/home/h231)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
<file mount='/home/avallin1' home='(innfs2:/vol/home/shome/home/avallin1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
<file mount='/home/park' home='(innfs2:/vol/home/shome/home/park)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
<file mount='/home/sp1' home='(innfs2:/vol/home/shome/home/sp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
<file mount='/home/ganga1' home='(innfs2:/vol/home/shome/home/ganga1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
<file mount='/home/nbp1' home='(innfs2:/vol/home/shome/home/nbp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
</filesystem>
</system>
<product>
<showtime>Tue Apr 26 14:05:23 2011
</showtime>
</product>
</csmclient>
使用工作解决方案进行更新
由于它不具有属性。。就像这里一样,我想要mount
、free
等以下是我在jqGrid中为上述xml所做的操作。
var i=0;
var filesystem=[];
$(xml).find('file').each(function(){
var row={};
row.id=i++;
row.total=$(this).attr('total');
row.free=$(this).attr('free');
row.used=$(this).attr('used');
row.percentage=$(this).attr('percentage');
filesystem.push(row);
});
$('#detailTable').empty();
$('<div width="100%">')
.attr('id','diskUsageSpan')
.html('<div class="titleBlue">Configuration>System>Disk Usage</div>'+
'<table id="list1" width="100%"></table>'+
'<div id="gridpager"></div>'+
'</div>')
.appendTo('#detailTable');
jQuery("#list1").jqGrid({
datatype: "clientSide",
height: 250,
colNames:['id','Total Space','Free Space', 'Used Space', 'Used Percentage'],
colModel:[
{name:'id',index:'id', width:90, align:"right"},
{name:'total',index:'total', width:90, align:"right"},
{name:'free',index:'free', width:90, align:"right"},
{name:'used',index:'used', width:90, align:"right"},
{name:'percentage',index:'percentage', width:120, align:"right"}
],
pagination:true,
pager : '#gridpager',
rowNum:10,
scrollOffset:0,
height: 'auto',
autowidth:true,
viewrecords: true,
gridview: true,
edit:false,
add:false,
del:false
});
for(var i=0;i<filesystem.length;i++)
jQuery("#list1").jqGrid('addRowData',i+1,filesystem[i]);
jQuery("#list1").setGridParam({rowNum:10}).trigger("reloadGrid");
完美工作感谢@Tomas和@doctrey
基本上,您可以使用jQuery选择器读取XMLDOM,就像读取HTMLDOM一样。因此,在您的XML示例中,如果您想对每个<file>
元素执行特定的操作,例如,将其mount
属性的内容添加到无序列表中,您可以执行以下操作:
$(xml).('file').children().each(function() {
var fileElem = this; // save the instance for closure
$('ul#theList').append($('<li>').text(fileElem.attr('mount'));
});
您可以使用jQuery内置的AJAX API:通过AJAX获取XML内容
$.ajax({
type: "GET",
url: "your.xml",
dataType: "xml",
success: function(xml) {
// Insert the previous code snippet here
}
});
我从这个教程中得到了所有这些,所以它可能对你也有帮助。注意:这是"jquery xml"在谷歌上的第一次点击。。。
您可能想要使用XSLT——它将允许您获取XML响应并直接应用XSL转换,然后可以将其插入DOM。
相关文章:
- 如何在Angular2中使用jQuery插件
- 可以前端maven插件使用节点,npm已经安装
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- 我的jQuery插件参数没有正确启动,遇到了问题
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 我应该如何从xml文件构建一个javascript页面
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- TableExport jquery插件:文件名和扩展名问题
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- jQuery插件-从插件中调用公共方法
- 压缩phonegap中ios的图像插件
- jQuery粘性插件可变顶部间距
- 将XML转换为普通的旧JavaScript对象
- js/jquery/other library插件来转换HTML->XML
- 我的 gulp 插件带有 through2 以奇怪的类似 XML 格式返回文件
- 如何在插件中添加名称相同但文件夹不同的资源.xml
- jQuery读取XML并保存数据以便在另一个插件中访问
- 检查GPS cordova插件诊断XML.config
- 我应该使用jquery中的什么插件或哪个插件来用xml文件内容填充html表
- 如何在json到xml插件中使用循环