当前位置: 首页 > 工具软件 > dhtmlxGrid > 使用案例 >

dhtmlx学习之dhtmlxgrid(一)

葛霄
2023-12-01

今天开始研究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>

 

 类似资料: