今天开始研究dhtmlx,首先开始grid的学习。
dhtmlx版本3.5
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dhtml Grid</title>
<link rel="STYLESHEET" type="text/css" href="<%=path %>/js/dhtml/dhtmlx.css">
</head>
<body>
<div id="mygrid_container" style="width:600px;height:150px;"></div>
<!--引用js-->
<script src="<%=path %>/js/jquery-1.5.1.js"></script>
<script src="<%=path %>/js/dhtml/dhtmlxcommon.js"></script>
<script src="<%=path %>/js/dhtml/dhtmlx.js"></script>
<script type="text/javascript">
var mygrid;
$(document).ready(function(){
mygrid = new dhtmlXGridObject("mygrid_container");//定义dhtmlxgrid对象为mygrid
mygrid.setImagePath("<%=path%>/image/dhtml/");//设置dhtmlxgrid的图片路径
mygrid.setHeader("name, age,birthday,price");//设置dhtmlxgrid列表头
mygrid.setInitWidths("100,50,*,100");
mygrid.setColAlign("left,right,center");
mygrid.setColSorting("str,int,date");
mygrid.setColTypes("edtxt,ed,dhxCalendar,ron");//设置dhtmlxgrid列类型
mygrid.enableMultiselect(true);//设置为可按shift多行选择
//绑定事件
mygrid.attachEvent("onRowSelect",doOnRowSelected);
mygrid.init();
//加载xml文件
mygrid.loadXML('<%=path%>/student/dhtmlListStudent.do?vmTemplate=index2.vm');
});
function doOnRowSelected(rowID,celInd){
alert("Selected row ID is "+rowID+"\nUser clicked cell with index "+celInd);
}
</script>
</body>
</html>