LingerUI中3级联动的数据库.docx

1、ligerui 中 3 级联动的数据库例子 分类： ASP.NETAJAX2011-09-29 22:092158 人阅读评论(7)收藏举报在线测试例子: http:/ sql2k,一共一张表,3 级联动是通过匹配 code 来搞前台代码:html view plaincopyprint?1. 2.3. 4.5. 6. 7. 8. 9. 10. 11. 12.13. 14. bodypadding:10px 15. .flfloat:left 16. 17.18. 19. var cmb1,cmb2,cmb3; 20. $(function () 21. cmb1=$(“#cmb1“).lig

2、erComboBox(data: null, isMultiSelect: false,onSelected: function (newvalue)setdata(cmb2,“/service/DataHandler.ashx?View=expcity); 22. cmb2=$(“#cmb2“).ligerComboBox(data: null, isMultiSelect: false,onSelected: function (newvalue)setdata(cmb3,“/service/DataHandler.ashx?View=expsubcity); 23. cmb3=$(“#c

3、mb3“).ligerComboBox(data: null, isMultiSelect: false ); 24.25. setdata(cmb1,“/service/DataHandler.ashx?View=expstate“); /页面加载时，先加载 cmb1 的值 26. ); 27.28. function setdata(obj,url) 29. 30. $.getJSON(url+“ /把 json 塞到下拉框里面去 33. $(“#txtjson“).val(JSON2.stringify(json); /把 json 转换为字符串，塞到textarea 里，用到了 jso

4、n2.js 34. 35. ); 36. 37.38. function getid() 39. 40. $.ligerDialog.success( $(“#cmb1_val“).val()+“_“+$(“#cmb2_val“).val()+“_“+$(“#cmb3_val“).val()+“+ 41. $(“#cmb1“).val()+“_“+$(“#cmb2“).val()+“_“+$(“#cmb3“).val() 42. ); /下拉框取后台 id 的用法，每个 ligerui 的下拉框会创建一个 id_val 的 hidden用来存放 id 43. 44. 45. 46. 47. 4

5、8. 49. 区域选择: 50. 51. 52. 53. 54. 55. 56. json 监视: 57. 58. 59. 60. 61. 后台引用 ashx 里的代码:csharp view plaincopyprint?1. using System; 2. using System.Collections; 3. using System.Data; 4. using System.Linq; 5. using System.Web; 6. using System.Web.Services; 7. using System.Web.Services.Protocols; 8. usin

6、g Newtonsoft.Json; 9. using Newtonsoft.Json.Converters; 10. using System.Data.Sql; 11. using System.Data.SqlClient; 12. using System.Configuration; 13.14. namespace test.service 15. 16. / 17. / $codebehindclassname$ 的摘要说明 18. / 19. WebService(Namespace = “http:/tempuri.org/“) 20. WebServiceBinding(C

7、onformsTo = WsiProfiles.BasicProfile1_1) 21.22. public class DataHandler : IHttpHandler 23. 24. HttpContext Context; 25. string json = “; 26.27. public void ProcessRequest(HttpContext context) 28. 29. Context = context; 30. context.Response.ContentType = “text/plain“; 31.32. LoadDataToJSON(); 33. co

8、ntext.Response.Write(json); 34. context.Response.End(); 35. 36.37. string GetQueryString(string name) 38. 39. return Context.Request.Paramsname; 40. 41.42. string View 43. 44. get return Context.Request.QueryString“View“; 45. 46.47. void LoadDataToJSON() 48. 49. switch (View) /这里么写写 sql 语句，或者调存储过程 5

9、0. 51. case “expstate“: 52. GetNormalData(“select id=min(code),text=state from city(nolock) group by state order by min(code)“); 53. break; 54. case “expcity“: 55. GetNormalData(“select id=code,text=city from city(nolock) where left(code,2)=“+ 56. GetQueryString(“stateid“).Substring(0,2)+ 57. “ and

10、right(code,2)=00 and right(code,4)00“); break; 62. 63. 64.65. void GetNormalData(string SQL) /SQL 查询，返回 json 字符串，这个方法是普通的 datatable 转 json 66. 67. SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings“Conn“.ToString(); 68. SqlDataAdapter DA = new SqlDataAdapter(SQL, Conn); 69

11、. Conn.Open(); 70. DataSet DS = new DataSet(); 71. DA.Fill(DS, “c0“); 72. Conn.Close(); 73. string rs = JsonConvert.SerializeObject(DS.Tables“c0“, new DataTableConverter(); 74. json = rs; 75. 代码应该贴全了，我还添加了一些注释，如果有疑问，留言吧，有在线测试例子哦，我测试了 IE8,FF,chrome，都兼容ligerui 中的 tree 的异步动态加载数据库例子 在线测试: http:/ view pl

12、aincopyprint?1. 2. 3. 4. tree 5. 6. 7. 8.9. 10. var manager = null; 11. $(function () 12. 13. $(“#tree1“).ligerTree( 14. 15. checkbox:false, 16. nodeWidth : 250, 17. onSelect: onSelect 18. ); 19. manager = $(“#tree1“).ligerGetTreeManager(); 20. ); 21.22. function onSelect(note) /这里的异步加载逻辑取决于你的数据库设计，

13、把选中节点的 id传回去，传回子节点 json 然后加载 23. 24. if (note.data.id=“0“) 25. 26. if (note.data.children /加载省和直辖市 28. 29. else 30. 31. if (note.data.children=undefined) 32. 33. if (note.data.id.toString().substr(2,2)=“00“) 34. 35. manager.loadData(note.target, “/service/DataHandler.ashx?View=expcity /加载城市 36. 37.

14、else 38. 39. if (note.data.id.toString().substr(4,2)=“00“) 40. manager.loadData(note.target, “/service/DataHandler.ashx?View=expsubcity /加载区县 41. 42. 43. 44. 45.46. 47. 48.49. 50. 51. 52. 我们都有一个家，名字叫中国53. 54. 55. 56. 57. 58. 讲解:什么原理，tree 的 onselect 事件里，把当前选中的节点的 id 传回后台，用 loaddata 方法把子节点 json 传回来，加载

15、进去，没了ligerui 中 grid 导出为 Excel 的例子() 1. 首先是在线测试例子: http:/ ligerui 是基于 jquery 来搭建页面，一个 grid 控件本质上是几个 table 组合而成如果可以将这个 DOM 的架构直接传回后台，自然可以输出为 excel 或者 word 或者 pdf为何不在前台 Js 实现 html 导出为 excel，因为 js 来创建 excel 这玩意会碰到浏览器安全性问题，不实用这个也贴一个方法，一个 js 搞定javascript view plaincopyprint?function method1() /整个表格拷贝到 EXC

16、EL 中 /检索浏览器 if(navigator.userAgent.indexOf(“MSIE“)Security=Setting “Enable unsafe ActiveX“); return; /创建 AX 对象 excel var oWB = oXL.Workbooks.Add(); /获取 workbook 对象 var oSheet = oWB.ActiveSheet; /在此进行样式控制 oSheet.Rows(1+“:“+1).RowHeight =20;/定义行高 oSheet.Rows(2+“:“+2).RowHeight =30; oSheet.Rows(1).Hori

17、zontalAlignment=3; var sel = document.body.createTextRange(); /激活当前 sheet sel.moveToElementText(curTbl); /把表格中的内容移到 TextRange 中 sel.select(); /全选 TextRange 中内容 sel.execCommand(“Copy“); /复制 TextRange 中内容 oSheet.Paste(); /粘贴到活动的 EXCEL 中 oXL.Visible = true; /设置 excel 可见属性 oSheet.Application.Quit(); /结束

18、当前进程 window.opener=null; window.close();/关闭当前窗口 (这个方法，只可 IE 并且要允许不安全的 activex 运行，这也太危险了，这年头.)下面采用的导 EXCEL 方法，适合不翻页的 grid，而且无需再读一次数据库，对于翻页的 grid 来说，要导全部，当然后台要再读一次数据库，这种导 EXCEL 方法 baidu一大堆，这里不重复代码:grid.htmhtml view plaincopyprint?$(function () $(“#toptoolbar“).ligerToolBar( items: text: 导出 Excel,id:ex

19、cel,icon:print,click:itemclick, text: 导出 Word ,id:word,icon:print,click:itemclick ); $(“#maingrid“).ligerGrid( columns: display: 主键, name: ProductID, type: int, totalSummary:type: count, display: 产品名, name: ProductName, align: left, width: 200 , display: 单价 , name: UnitPrice, align: right, type:floa

20、t,totalSummary:render: function (suminf, column, cell)return 最大值: + suminf.max + ;,align: left, display: 仓库数量, name: UnitsInStock, align: right, type: float,totalSummary:type: sum , dataAction: local, data: AllProductData, sortName: ProductID, showTitle: false, totalRender: f_totalRender, width: 100

21、%, height: 100%,heightDiff:-10 ); $(“#pageloading“).hide(); ); function f_totalRender(data, currentPageData) return “总仓库数量:“+data.UnitsInStockTotal; function itemclick(item) grid = $(“#maingrid“).ligerGetGridManager(); if(item.id) switch (item.id) case “excel“:$.ligerDialog.open(url: “/service/print

22、.aspx?exporttype=xls“);return; case “word“:$.ligerDialog.open(url: “/service/print.aspx?exporttype=doc“);return; 导出页面 print.aspxhtml view plaincopyprint?function GetQueryString(name) var reg = new RegExp(“(| var r= window.location.search.substr(1).match(reg); if (r!=null) return unescape(r2);return

23、null; function gethtml(g) parent.$(“.l-grid-header-table“,g).attr(“border“,“1“); parent.$(“.l-grid-body-table“,g).attr(“border“,“1“); $(“#hf“).val( parent.$(“.l-grid-header“,g).html()+ /这里把表头捞出来 parent.$(“.l-grid-body-inner“,g).html()+ /表身，具体数据 parent.$(“.l-panel-bar-total“,g).html()+“+ /这是全局汇总，1.1.

24、0 版本新添加的 parent.$(“.l-bar-text“,g).html() /这是翻页讯息 ); parent.$(“.l-grid-header-table“,g).attr(“border“,“0“); parent.$(“.l-grid-body-table“,g).attr(“border“,“0“); / parent.$(“.l-grid-header-table“,g).removeAttr(“border“); / parent.$(“.l-grid-body-table“,g).removeAttr(“border“); function init() if (Get

25、QueryString(“exporttype“)=“xls“) document.getElementById(“btnxls“).click(); else document.getElementById(“btndoc“).click(); setTimeout(function () parent.$.ligerDialog.close(); , 3000); 导出中. print.aspx.cscsharp view plaincopyprint?using System; using System.Collections; using System.Configuration; u

26、sing System.Data; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; namespace service public partial class print : System.Web.UI.Page protected void Page_Load(object sender, E

27、ventArgs e) if (!IsPostBack) void exportexcel() Response.Clear(); Response.Buffer = true; Response.Charset = “utf-8“; Response.AppendHeader(“Content-Disposition“, “attachment;filename=tmp.xls“); Response.ContentEncoding = System.Text.Encoding.GetEncoding(“utf-8“); Response.ContentType = “application

28、/ms-excel“; this.EnableViewState = false; System.IO.StringWriter oStringWriter = new System.IO.StringWriter(); System.Web.UI.HtmlTextWriter oHtmlTextWriter = new System.Web.UI.HtmlTextWriter(oStringWriter); oHtmlTextWriter.WriteLine(hf.Value); Response.Write(oStringWriter.ToString(); Response.End();

29、 void exportword() Response.Clear(); Response.Buffer = true; Response.Charset = “utf-8“; Response.AppendHeader(“Content-Disposition“, “attachment;filename=tmp.doc“); Response.ContentEncoding = System.Text.Encoding.GetEncoding(“utf-8“); Response.ContentType = “application/ms-word“; this.EnableViewSta

30、te = false; System.IO.StringWriter oStringWriter = new System.IO.StringWriter(); System.Web.UI.HtmlTextWriter oHtmlTextWriter = new System.Web.UI.HtmlTextWriter(oStringWriter); oHtmlTextWriter.WriteLine(hf.Value); Response.Write(oStringWriter.ToString(); Response.End(); protected void Button1_Click(object sender, EventArgs e) exportexcel(); protected void Button2_Click(object sender, EventArgs e) exportword(); 代码原理:在点导出按钮的时候，弹一个 print.aspx 页面，这个页面把 grid 的 html 传给自己一个叫 hf 的 hidden 里面，然后后台 response 输出这个 html