DhtmlxGrid首行设置复选框和行号的方法
本人属于菜鸟型的，但是爱好写程序，没事的时候一直喜欢研究一些技术方面的内容。
以前用ExtjsGrid，不过这个确实比较大，而且用起来不是很快。所以一直在找替代的东西。
经朋友介绍用了免费的DhtmlxGrid，不过有些东西需要专业版，专业版在哪里下载，不用我说的吧，呵呵。
下面的图是我弄出来的效果图。
?
首先是简历自己的页面，我用的是jsp，在页面的头部引用下面的代码。
这些代码根据自己的实际需要可以去掉一部分。
<link type="text/css" rel="stylesheet" href="public/css/main.css" /><script type="text/javascript"src="public/js/jquery-1.4.4.js"></script><script type="text/javascript" src="public/dhtmlxPro/dhtmlxcommon.js"></script><script type="text/javascript" src="public/dhtmlxPro/dhtmlxtoolbar.js"></script><link rel="stylesheet" type="text/css" href="public/dhtmlxPro/skins/dhtmlxtoolbar_dhx_skyblue.css"></link><link rel="stylesheet" type="text/css" href="public/dhtmlxPro/dhtmlxtree.css"></link><link rel="STYLESHEET" type="text/css" href="public/dhtmlxPro/dhtmlxgrid.css"></link><link rel="stylesheet" type="text/css" href="public/dhtmlxPro/skins/dhtmlxgrid_dhx_skyblue.css"></link><link rel="stylesheet" type="text/css" href="public/dhtmlxPro/skins/dhtmlxgrid_dhx_blue.css"></link><link rel="stylesheet" type="text/css" href="public/dhtmlxPro/ext/dhtmlxgrid_pgn_bricks.css"></link><script src="public/dhtmlxPro/dhtmlxgrid.js"></script><script src="public/dhtmlxPro/dhtmlxgridcell.js"></script><script src="public/dhtmlxPro/ext/dhtmlxgrid_pgn.js"></script><script src="public/dhtmlxPro/ext/dhtmlxgrid_splt.js"></script><script src="public/dhtmlxPro/ext/dhtmlxgrid_mcol.js"></script><script src="public/dhtmlxPro/ext/dhtmlxgrid_drag.js"></script><script src="public/dhtmlxPro/ext/dhtmlxgrid_filter.js"></script><script src="public/dhtmlxPro/ext/dhtmlxgrid_hmenu.js"></script><script src="public/dhtmlxPro/ext/dhtmlxgrid_json.js"></script><script src="public/dhtmlxPro/excells/dhtmlxgrid_excell_cntr.js"></script>
?然后再jsp的<body onload="init()">这样在页面加载的时候就会创建我们需要的表格了。
对应的javascript代码。
?
var mygrid;/** * 初始化页面值 */function init(){ var gridToolBar = new dhtmlXToolbarObject("gridToolbarObj"); gridToolBar.setIconsPath("public/dhtmlxPro/common/imgs/"); gridToolBar.addText("info", 0, "工具栏"); gridToolBar.addSeparator("sep1", 1); gridToolBar.addButton("new", 2, "新增", "add.gif", "add_dis.gif"); gridToolBar.setItemToolTip("new","新增数据项。"); gridToolBar.addSeparator("sep2", 3); gridToolBar.addButton("save", 4, "保存", "save.gif", "save_dis.gif"); gridToolBar.setItemToolTip("save","提示：保存修改的数据。"); gridToolBar.addSeparator("sep3", 5); gridToolBar.addButton("update", 6, "修改", "save_as.gif", "save_as_dis.gif"); gridToolBar.addSeparator("sep4", 7); gridToolBar.addButton("del", 8, "删除", "remove.gif", "remove_dis.gif"); gridToolBar.addSeparator("sep5", 9); gridToolBar.addButton("search", 10, "查询", "search.gif", "search_dis.gif"); gridToolBar.addSeparator("sep6", 11); gridToolBar.addInput("searchVal", 12, "", "100"); gridToolBar.setItemToolTip("searchVal","提示：请在这里输入查询的值。。。"); gridToolBar.disableItem("update"); //gridToolBar按钮的单击事件 gridToolBar.attachEvent("onClick", function(id){ if(id=="new"){ gridBtnAdd(); }else if(id=="save"){ gridBtnSave(); }else if(id=="update"){ gridBtnUpdate(); }else if(id=="del"){ gridBtnDel(); }else{ gridBtnSearch(); } });//Grid mygrid = new dhtmlXGridObject('gridbox'); mygrid.selMultiRows = true; mygrid.setImagePath("public/dhtmlxPro/imgs/");//表头设置用逗号分割每列(#master_checkbox 表示表头为checkbox，并支持全选)mygrid.setHeader(" ,#master_checkbox,栏目代码,栏目名称,上级栏目代码,类型,显示标志");//列宽mygrid.setInitWidths("50,50,100,150,100,50,80");//列位置mygrid.setColAlign("center,center,left,left,left,center,center");//列类型mygrid.setColTypes("cntr,ch,ro,ro,ro,ro,ro");//列排序方式mygrid.setColSorting("int,na,str,str,str,str,str");mygrid.setColumnColor("#CCE2FE");//数据列拖拽//mygrid.enableColumnMove(true);//表头列显示/隐藏mygrid.enableHeaderMenu(); //start grid; mygrid.attachEvent("onRowSelect", doOnRowSelected); //分页设置 mygrid.enablePaging(true, 100, 3, "pagingArea", true); mygrid.setSkin("dhx_skyblue"); mygrid.setPagingSkin("toolbar","dhx_skyblue"); mygrid.init(); mygrid.splitAt(1); mygrid.loadXML("public/dhtmlxPro/common/grid.xml");}//相关按钮的具体方法。/** * 表格控件的增加按钮事件 */function gridBtnAdd(){alert("Add");}/** * 表格控件的保存按钮事件 */function gridBtnSave(){alert("save");}/** * 表格控件的删除按钮事件 */function gridBtnDel(){alert("del");}/** * 表格控件的更新按钮事件 */function gridBtnUpdate(){alert("update");}/** * 表格控件的查找按钮事件 */function gridBtnSearch(){alert("search");}/** * 表格控件的行选中事件 */function doOnRowSelected(rowId) {var val = mygrid.cells(rowId,mygrid.getSelectedCellIndex()).getValue();alert(val); }?
?剩下的就是具体的应用了，代码不写了。
而且我的代码太乱，估计看完上面的，大家都会写了。
1 楼 superboy1984 2012-02-22 传份dhtmlxgrid的专业版给我啊，找了好多骗人的都是大众版，3Q。。。316423826@qq.com 2 楼 superboy1984 2012-02-22 还有就是dhtmlxgrid如何设置行高，我想让其每行一样高。。。行高太低会撑大，导致并不是每行都一样高 3 楼 SilverMoonlight 2012-04-26 好文章，顶