dhtmlx学习之dhtmlxgrid（一）

最新推荐文章于 2023-12-27 16:58:19 发布

an_feng

最新推荐文章于 2023-12-27 16:58:19 发布

阅读量530

点赞数

分类专栏： dhtmlx 文章标签： dhtmlxgrid

本文链接：https://blog.csdn.net/an_feng/article/details/84382536

版权

dhtmlx 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

an_feng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dhtmlx学习之dhtmlxgrid（一）

今天开始研究dhtmlx，首先开始grid的学习。 dhtmlx版本3.5 &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;&lt;title&gt;Dhtml Grid&lt;/title&gt;&l
复制链接

扫一扫