例子——dhtmlxTree之checkboxes(ASP.NET)

Default.aspx页面的代码:

 

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Sample_dhtmlxTree_checkboxes</title> <link href="JavaScript/TreeCodebase/dhtmlxtree.css" mce_href="JavaScript/TreeCodebase/dhtmlxtree.css" type="text/css" /> <mce:script src="JavaScript/TreeCodebase/dhtmlxcommon.js" mce_src="JavaScript/TreeCodebase/dhtmlxcommon.js" type="text/javascript"></mce:script> <mce:script src="JavaScript/TreeCodebase/dhtmlxtree.js" mce_src="JavaScript/TreeCodebase/dhtmlxtree.js" type="text/javascript"></mce:script> </head> <body> <form id="form1" runat="server"> <div> <table> <tr> <td valign="top"> <div id="treeboxbox_tree" style="width: 250; height: 218; background-color: #f5f5f5; border: 1px solid Silver;"> </div> </td> </tr> </table> <table> <tr> <td style="padding-left: 25" mce_style="padding-left: 25" valign="top"> Two state checkboxes:<br /> <span style=" margin-left:10px" mce_style=" margin-left:10px"> <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="tree.setCheck(tree.getSelectedItemId(),true);"> Check item </a> </span> <span style=" margin-left:10px" mce_style=" margin-left:10px"> <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="tree.setCheck(tree.getSelectedItemId(),false);"> UnCheck item </a> </span> <span style=" margin-left:10px" mce_style=" margin-left:10px"> <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="tree.setSubChecked(tree.getSelectedItemId(),true);"> Check branch </a> </span> <span style=" margin-left:10px" mce_style=" margin-left:10px"> <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="tree.setSubChecked(tree.getSelectedItemId(),false);"> UnCheck branch </a> </span> <span style=" margin-left:10px" mce_style=" margin-left:10px"> <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="alert(tree.getAllChecked());"> Get list of checked </a> </span> </td> </tr> </table> <table> <tr> <td valign="top"> <div id="treeboxbox_tree2" style="width: 250; height: 218; background-color: #f5f5f5; border: 1px solid Silver; overflow: auto;"> </div> </td> </tr> </table> <table> <tr> <td style="padding-left: 25" mce_style="padding-left: 25" valign="top"> Three state checkboxes<br /> <span style=" margin-left:10px" mce_style=" margin-left:10px"> <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="tree2.setCheck(tree2.getSelectedItemId(),true);"> Check item </a> </span> <span style=" margin-left:10px" mce_style=" margin-left:10px"> <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="tree2.setCheck(tree2.getSelectedItemId(),false);"> UnCheck item </a> </span> <span style=" margin-left:10px" mce_style=" margin-left:10px"> <a href="javascript:void(0);" mce_href="javascript:void(0);" onclick="alert(tree2.getAllChecked());"> Get list of checked </a> </span> </td> </tr> </table> <mce:script type="text/javascript"><!-- tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0); tree.setImagePath("JavaScript/TreeCodebase/imgs/csh_bluebooks/"); tree.enableCheckBoxes(1); tree.loadXML("tree3.xml"); tree2=new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0); tree2.setImagePath("JavaScript/TreeCodebase/imgs/csh_bluebooks/"); tree2.enableCheckBoxes(1); tree2.enableThreeStateCheckboxes(true); tree2.loadXMLString("<?xml version='1.0' encoding='UTF-8'?><tree id='0'><item text='Books' id='books' open='1' im0='tombs.gif' im1='tombs.gif' im2='iconSafe.gif' call='1' select='1'>11</item></tree> "); // --></mce:script> </div> </form> </body> </html>

 

 

dhtmlXTreeObject的第一个参数是显示dhtmlXTree的div标签的ID;

setImagePath用来设置图片路劲;

loadXML加载XML文件(显示效果是树型结构);

loadXMLString加载XML字符串。

 

下载地址:http://www.dhtmlx.com/docs/products/dhtmlxTree/index.shtml

你可能感兴趣的:(例子——dhtmlxTree之checkboxes(ASP.NET))