日期:2014-05-17  浏览次数:20615 次

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("&nbsp;,#master_checkbox,栏目代码,栏目名称,上级栏目代码,类型,显示标志");
	//列宽
	mygrid.setInitWidth