dhtmlxGrid 的入门学习

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 οnlοad="doInitGrid();">
    This is my gird test page. <br>
    <br>
    <button οnclick="addRow()">Add Row</button>   <button οnclick="removeRow()">Remove Row</button>
    <br>
    <div id="mygrid_container" style="width:600px;height:150px;"></div>
  </body>s

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值