dhtmlxGrid 的入门学习

来源:互联网 发布:指南针的mc指标源码 编辑:程序博客网 时间:2024/04/28 06:18

1、在页面必须引用的文件:

 <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>

 

2、在页面的js:

 

<script>
        var mygrid;
     function doInitGrid(){
    mygrid = new dhtmlXGridObject('mygrid_container');
 
      mygrid.setImagePath("codebase/imgs/");
    //设置列名
      mygrid.setHeader("Model,Qty,Price");
    //设置列的宽度
      mygrid.setInitWidths("*,200,200");
    //设置列的水平对齐方式
      mygrid.setColAlign("left,right,right");
    
      mygrid.setSkin("light");
      //设置列的排序类型
      mygrid.setColSorting("str,int,int");
      //设置列的可读、可编辑、文本域、复选框等
      mygrid.setColTypes("ro,ed,txt");
      //设置选中行的事件
      mygrid.attachEvent("onRowSelect",doOnRowSelected);
  
      mygrid.init();
      //加载数据部分
      mygrid.loadXML("gridDatas.xml");
     }
    
 
  function addRow() {
   var newId = (new Date()).valueOf();
   mygrid.addRow(newId, "", mygrid.getRowsNum());
   mygrid.selectRow(mygrid.getRowIndex(newId), false, false, true);
  }
  
  function removeRow() {
   var selId = mygrid.getSelectedId()
   mygrid.deleteRow(selId);
  }
  
  function doOnRowSelected(rowID,celInd){
         alert("Selected row ID is "+rowID+"/nUser clicked cell with index "+celInd);
     }
</script>

 

3、body部分:

<body onload="doInitGrid();">
    This is my gird test page. <br>
    <br>
    <button onclick="addRow()">Add Row</button>   <button onclick="removeRow()">Remove Row</button>
    <br>
    <div id="mygrid_container" style="width:600px;height:150px;"></div>
  </body>s

原创粉丝点击