DhtmlxGrid首行设立复选框和行号的方法
日期：2014-05-17 浏览次数：20686 次
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.setInitWidth
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
