DhtmlxGrid首行设置复选框和行号的方法

pblz

浏览: 21580 次
性别:
来自: 长春

最近访客更多访客>>

tclmsn

u013642276

76529775

xiaokai324

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

struts2
web

dhtmlxgrid cntr master_checkbox 行号

本人属于菜鸟型的，但是爱好写程序，没事的时候一直喜欢研究一些技术方面的内容。

以前用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.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);
    
    
}

剩下的就是具体的应用了，代码不写了。

而且我的代码太乱，估计看完上面的，大家都会写了。

查看图片附件

分享到：

struts2中遍历Map集合总结(转）

2011-12-30 20:46
浏览 8248
评论(4)
分类:Web前端
查看更多

4 楼 ligangtzzg 2012-08-13

如果我这也选中了几条然后翻到下一下又选中了几条他能都保存下来吗？

3 楼 SilverMoonlight 2012-04-26

好文章，顶

2 楼 superboy1984 2012-02-22

还有就是dhtmlxgrid如何设置行高，我想让其每行一样高。。。行高太低会撑大，导致并不是每行都一样高

1 楼 superboy1984 2012-02-22

传份dhtmlxgrid的专业版给我啊，找了好多骗人的都是大众版，3Q。。。
316423826@qq.com

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论