dhtmlxGrid组件学习一

dhtmlxGrid列表生成展示

简单5部曲,生成列表
	
	//一、导入相应的必须包文件,包括js,css。
		<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxgrid.css">
   		<script src="codebase/dhtmlxcommon.js"></script>
    	<script src="codebase/dhtmlxgrid.js"></script>
    	<script src="codebase/dhtmlxgridcell.js"></script>
    	<script>
     	   //脚本
    	</script>
	
	//二、在页面设置一个div,指定id,设置大小宽高。此div是列表的容器
		<div id="mygrid_id" style="width:600px;height:150px;"></div>
	
	//三、加入列表初始化脚本代码
	<script>
		var mygrid;
		function doInitGrid(){
		mygrid=new dhtmlXGridobject("mygrid_id");//实例化列表对象,参数即为容器div的id。
		mygrid.setImagePath("codebase/imgs/");
		mygrid.setHeader("Model,Qty,Price");//设置表头
		mygrid.setInitWidths("*,150,150");//设置宽,*代表尽量宽
		mygrid.setColAlign("left,right,right");//文字对齐方向
		mygrid.setSkin("light");
		mygrid.init();//初始化
	
	}
    	</script>
	//四、指定列表生成的触发方式,可以绑定按钮,可以onload
	<body onload="doInitGrid();">//指定body加载完成后就初始化mygrid
	
	//五、加载数据。grid加载的数据源是xml格式的文件,有指定的节点rows,指明id,
	//结构跟设置的列表保持一致,在init()方法之后,执行mygrid.loadXML("xmlPath");
	<?xml version="1.0" encoding="UTF-8"?>
    <rows>
        <row id="a">
            <cell>Model 1</cell>
            <cell>100</cell>
            <cell>399</cell>
        </row>
        <row id="b">
            <cell>Model 2</cell>
            <cell>50</cell>
            <cell>649</cell>
        </row>
        <row id="c">
            <cell>MOdel 3</cell>
            <cell>70</cell>
            <cell>499</cell>
        </row>
    </rows>

	




你可能感兴趣的:(dhtmlxGrid组件学习一)