dhtmlxgrid 常用功能介绍

原创 2013年12月04日 10:28:15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Easy skinable design</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="title" content="Samples" />
<meta name="keywords" content="" />
<meta name="description" content="" />


</head>
<body>


	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/dhtmlxgrid.css">
	<!-- 标题栏会显示图片,这样更美观 -->
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/skins/dhtmlxgrid_dhx_skyblue.css">
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/skins/dhtmlxgrid_dhx_black.css">
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/skins/status_toolbar_accordion.css">
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/skins/status_toolbar_layout.css">
	<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid/skins/status_toolbar_window.css">
	<!-- 
	<script src="dhtmlxgrid/dhtmlxcommon.js"></script>
	<script src="dhtmlxgrid/dhtmlxgrid.js"></script>
	<script src="dhtmlxgrid/dhtmlxgridcell.js"></script>
	<script src="dhtmlxgrid/dhtmlxgrid_pgn.js"></script>
	 -->
	<script src="dhtmlxgrid/dhtmlx.js"></script>
	
	<!-- 如果需要给某列数据添加链接,则需要引入这个js -->
	<script src="dhtmlxgrid/dhtmlxgrid_excell_link.js"></script>

		
	 <div id="recinfoArea"><!--页数信息--></div> 
	<div id="gridbox" style="width:503px;height:120px;background-color:white;"></div>
	
	<div id="pagingArea"><!--页数区域 --></div>  
	
	<input type="button" value="获取选中的行" onclick="getSelectedId()" style="font-size:12px"></input><br></br>
	<input type="button" value="改变rowID" onclick="changRowid()" style="font-size:12px"></input><br></br>
	<input type="button" value="字体变粗setRowTextBold" onclick="setRowTextBold()" style="font-size:12px"></input><br></br>
	<input type="button" value="自己设置样式" onclick="setRowTextStyle()" style="font-size:12px"></input><br></br>
	<input type="button" value="删除选中的列  有待解决" onclick="deleteColumn()" style="font-size:12px"></input><br></br>

		<script>
		function getSelectedId(){
			//获取的是数据的唯一标示
			var id = mygrid.getSelectedId();
			alert(id);
		}
		
		function changRowid(){
			var id = mygrid.getSelectedId();
			mygrid.changeRowId(id, id+"1");
			alert(mygrid.getSelectedId())
		}
		
		function setRowTextBold(){
			var id = mygrid.getSelectedId();
			mygrid.setRowTextBold(id);
		}
		
		function setRowTextStyle(){
			var id = mygrid.getSelectedId();
			mygrid.setRowTextStyle(id, "color:red;border:1px solid gray");
		}
		
		function deleteColumn(){
			alert(selectedCol);
			//mygrid.setColumnsVisibility(selectedCol);
			mygrid.deleteColumn(selectedCol);
		}
		

		
		mygrid = new dhtmlXGridObject('gridbox');
		mygrid.setImagePath("dhtmlxgrid/imgs/");
		//标题显示内容
		mygrid.setHeader("多选,单选,Name,Date of Birth, First Book Published");
		//指明列的宽度,*表示是余下的宽度显示
		mygrid.setInitWidths("*,50,50,50,50");
		//表示内容排序位置,分别是左、中、中
		mygrid.setColAlign("left,center,center,center,center");
		
		/*
			ch ---- checkbox
			ra ---- radio
			ro ---- readonly
			txt ---- 显示的是字符串
		*/
		mygrid.setColTypes("ch,ra,ro,link,txt");
		//mygrid.setColTypes("ed,dhxCalendar,dhxCalendarA");
		
		//按照什么方式排序int,str,date 三个类型
		mygrid.setColSorting("str,str,str,str,date");
		
		//指明使用什么皮肤(天蓝色),这个和前面引用是CSS对应起来
		mygrid.setSkin("dhx_skyblue");
		//mygrid.setSkin("dhx_black");
		
		//初始化数据
		mygrid.init();
		//mygrid.loadXML("../common/grid_dates.xml");
		
		//备注:数据列一定要和标题栏对应起来,否则会显示前面的数据
		//上面每个配置项都需要一一对应,否则会出现意想不到的错误,很难发现,即对每一列样式的设置
		 var js={
				    rows:[
				        { id:1001,
				     data:[
				           "0",//0表示checkbox没有被选中
				           "ra1",//非0表示radio被选中
				          "100",
				          //^后面显示的是链接地址,一定要指明这列数据类型是link
				          "A Time to Kill^http://www.baidu.com",
				          "05/01/1998"] },
				       { id:1002,
				     data:[
				           "1",//非0表示checkbox被选中
				           "0",//非0表示radio被选中
				          "1000",
				          "Blood and Smoke",
				          "01/01/2000"] }
				    ]}
		 
		 //指明导入数据的回调函数
		 mygrid.parse(js,function(){
			 //alert(1);
		 },"json");
		
		 //允许分页 
		 /*
		grid.enablePaging(mode,pageSize,pagesInGrp,pagingControlsContainer,showRecInfo,pagingStateContainer);
		 
		mode(true|false) - enable|disable paging mode;
		pageSize - set count of rows per page;
		pagesInGrp - set count of visible page selectors;
		pagingControlsContainer - id or container that will be used for showing paging controls;
		showRecInfo(true|false) - enable|disable showing of additional information about paging state;
		pagingStateContainer - id or container that will be used for showing paging state.
		 */
		 
		 mygrid.enablePaging(true, 1, 5, "pagingArea", true, "recinfoArea"); 
		 //mygrid.enablePaging(true, 10, 3, "pagingArea");
		 //mygrid.setPagingSkin("toolbar", "dhx_skyblue");
		 mygrid.setPagingSkin("bricks");
		
		/*
			mygrid.cells(row_id, col) -- 通过行ID,列下标 确定cell对象 

  			mygrid.cells2(rowIndex,col) --  通过行、列下标 确定cell对象
		*/
		//从第0行0列开始计算,弹出信息是05/01/1998
		//alert(mygrid.cells2(0,4).getValue());
		//弹出信息是05/01/1998
		//alert(mygrid.cells(1001,4).getValue());
		
		//给指定的单元格赋值
		//mygrid.cells(1001,4).setValue("05/01/1997");
		 
		//绑定checkbox和radio事件
		/*
		 	rId - id or the row; 弹出的是行ID
			cInd - index of the cell;
			state- state of the checkbox/radiobutton.
		 */
		/*
		 mygrid.attachEvent("onCheckbox", function(rId,cInd,state){
			 
			 alert(rId);//
			 alert(cInd);
			 alert(state);
		 }); 
		*/
		
		//对一行绑定双击事件
		/*
		 	rId - id or the row; 弹出的是行ID
			cInd - index of the cell; 双击的列,从第0项开始
		 */
		 /*
		mygrid.attachEvent("onRowDblClicked", function(rId,cInd){
			alert(rId);
			alert(cInd);
		});  
		*/
		
		//选中某一行触发的事件
		/*
		 	rId - id or the row; 弹出的是行ID
			cInd - index of the cell; 双击的列,从第0项开始
		 */
		 
		 var selectedRow;
		 var selectedCol;
		mygrid.attachEvent("onRowSelect", function(id,ind){
			//alert(id);
			//alert(ind);
			selectedRow = id;
			selectedCol = ind;
		});
		
		
		//通过行ID 删除一行
		// mygrid.deleteRow(1001);
		/*
			new_id - id of the new row;
			text - array|string of row's labels, may be a comma separated list or an array;
			ind - position of the row (optional), row is added to the last position by default.
		*/
		mygrid.addRow(123,"0,0,555,huangbiao,1988/11/30",0);//放在第一行
		
		//将rowid那行上/下移动一位或者是
		//mygrid.moveRowDown(123);
		//mygrid.moveRowUp(123);

		//清除表格里面的全部数据
		//mygrid.clearAll(); //只删除数据,不删除header
		//mygrid.clearAll(true);//数据和header全部删除 
		
		//得到总共的行数
		//alert(mygrid.getRowsNum());
		


	</script>
</body>
</html>

 

dhtmlx使用翻译(五)dhtmlxgrid 列操作

 1.1.90 adjustColumnSize(cind)版本:大众版参数:cind:列索引用途:调整某列宽,使列所有数据可见,但需要在制定列宽的情况下,即不能设定列宽为 *参考实例:mygrid....
  • warison2008
  • warison2008
  • 2010年06月24日 22:18
  • 4189

datagrid加载数据,列内容显示,改变字体颜色

//1.加载数据  列内容显示蓝色字体 #region 加载数据  列内容显示蓝色字体 //代码出自:三项工作--项目管理系统--项目管理--项目变更--采购方式变更申请 //页面路径:Ope...
  • qq_25409579
  • qq_25409579
  • 2016年01月11日 11:01
  • 2551

Android中更改字体颜色的多种方法

在开发中,偶尔要单独更改TextView中某些字的字体颜色,慢慢摸索出几种方法,之后有发现会再更新... 1.通过SpannableStringBuilder来实现,它就像html里边的元素改变...
  • hwp88110
  • hwp88110
  • 2017年04月13日 17:12
  • 398

设置Putty 字体 颜色 全屏

效果 1.   字体 2.全屏 3. 颜色
  • wengyupeng
  • wengyupeng
  • 2015年02月09日 15:30
  • 31835

WPF控件(Control类:颜色与字体)

WPF控件分类: 内容控件 标题内容控件 文本控件 列表控件 基于范围的控件 日期控件 控件类 控件是与用户交互的元素。控件可以获得焦点,能接受键盘或鼠...
  • dyllove98
  • dyllove98
  • 2013年06月14日 22:42
  • 8487

Android中字体颜色大全-146种(完整版)

 附Android中146种颜色对应的xml色值: xml version="1.0" encoding="utf-8"?> resources>     color name="w...
  • IOT_LI
  • IOT_LI
  • 2015年02月07日 20:11
  • 2359

SecureCRT中改变背景色和文字颜色

options->;session options->;emulation->;terminal选择linux(相应的服务器系统)ansi color 打上狗狗 options->; global ...
  • kobejayandy
  • kobejayandy
  • 2013年12月09日 13:35
  • 32955

layer ui插件显示tips时,修改字体颜色

今天做调查问卷,又遇到一个蛋疼小问题,记录下。 调查问卷有很多选项是要求必填的,如果不填的话,需要给出友好的提示。用的如下组件:http://layer.layui.com/ 1、之前一直默认用的...
  • wodeai1235
  • wodeai1235
  • 2017年03月07日 14:19
  • 4508

CSDN-markdown编辑器语法——字体、字号与颜色

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式。但是它本身是不支持修改字体、字号与颜色等功能的!  CSDN-markdow...
  • testcs_dn
  • testcs_dn
  • 2015年05月14日 12:33
  • 100373

C++控制输出的字体颜色

C++控制台程序运行时输出框默认的文字颜色是白色,所以我常称其输出框为黑白框。但是这个文字样式不是固定不变的,是可以改变颜色的字体的。方法有两种: 一、设置输出框的框体属性。在运行时弹出的输出框标题...
  • u012424148
  • u012424148
  • 2016年10月11日 22:25
  • 5300
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dhtmlxgrid 常用功能介绍
举报原因:
原因补充:

(最多只允许输入30个字)