jquery ajax TreeView asp.net改进版
jquery的treeview 在显示大层次树是会卡死浏览器，我结合http://www.cnblogs.com/xuanye/archive/2009/10/26/1590250.html的改进版做的这个改进版（因为很多人没读他的源码，不知道怎么请求节点的处理页面），把asp.net的json序列化 都做了进去（Newtonsoft.jsonnet2.0.dll），，采用ajax+wrapperpage+usercontrol的模式生成json（因为牵涉公司两个配置文件，必须读配置信息连接数据库，绕了一下其实可以更轻量级的handler来处理，例子不能运行，但可以看看）,同时扩展了很多的配置项都有说明，希望对大家有帮助 使用例如： <link href="lib/jquery/plugins/treeview/jquery.tree.css" rel="stylesheet" type="text/css" /> <script src="lib/jquery/jquery.js" type="text/javascript"></script> <script src="lib/jquery/plugins/treeview/js/jquery.tree.js" type="text/javascript"></script> <%--<script src="lib/jquery/plugins/treeview/js/getData.js" type="text/javascript"></script>--%> <script src="lib/jquery/plugins/treeview/js/common.js" type="text/javascript"></script> <%--<script src="lib/jquery/plugins/treeview/js/tree3.js" type="text/javascript"></script>--%> <!--你可以把下面的代码放到一个js文件当中--> <script type="text/javascript"> var checknodes = "HJH8,HJA5"; //你事先要传给树控件的 已选中节点 id $(document).ready(function() { var o = { isAsync: false, //是否异步获取节点，根据咱的要求 设为false url: "AjaxWrapperPages/AsyncGetTreeNodes.aspx", //请求节点的页面，如果没有改变文件路径 不用关心 cbiconpath: "lib/jquery/plugins/treeview/images/icons/", //同上 checkbox icon的目录位置 //icons: ["checkbox_0.gif", "checkbox_1.gif", "checkbox_2.gif"],//不用配置 emptyiconpath: "lib/jquery/plugins/treeview/images/s.gif", //checkbxo三态的图片 animate: true, //不用配置，动画没有效果 theme: "bbit-tree-lines", //bbit-tree-lines ,bbit-tree-no-lines,bbit-tree-arrows有线、没线、箭头 三个样式中选择 showcheck: true //是否显示复选框 , checkNodes: checknodes //上面 你事先要传给树控件的 已选中节点 id的变量 , rootText: "中石化单位"//根节点的文本 可为空 则没有根节点 建议起个有意义的名字描述这棵树 //,onnodeclick: function(item) { alert(item.text); } , dbconfigPath: "~/hanwayDbConfig.hwdb" //可去掉，这是我做测试用 可不用此配置 , conStr: "conStr" //连接字符串 你可直接传，考虑安全 可不用此配置 /************ 必填项 ****************/ , sqlPath: "~/Db.hwSql" //sql语句存放的文件位置 , sqlID: "dwdyinfo" //sql对应的sqlid , dtFields: "dm,zhdm,mc" //表的结构 控件之关心3个：“主键id 外(父)键id 节点文本” 依次','分开 , pnodeMark: "dyzhgx" //和上面的dtFields中的外键 用来构造过滤条件 如"zhdm='dyzhgx'" 查询出所有一级节点 }; $("#tree").treeview(o); //到服务器处理选中节点 $("#showchecked").click(function(e) { var changnodes = $("#tree").getTSVs(); //得到所有选中节点的id if (changnodes != null) { changnodes = changnodes.join(","); $.ajax({ type: "get", url: "some.aspx", data: "nodes="+changnodes, success: function(msg) { alert("Data Saved: " + msg); } }); } });
