JData 使用教程(八) 使用 TreeColumn 实现 TreeGrid


关 JData 的文章,很久没有写了,一方面是工作忙,另一方面在使用 JData 的时候,发现了一些 BUG ,以及有些不好用的地方,需要修改,所以停了下来。

  有朋友给我提了几个意见:

  1、 JData 这名字容易让人误会与 Java 相关的,建议改名为 jsData,这个建议不错。但是为了保持前后一致,在这里暂时还是叫 JData 吧。

  2、希望能提供完整的文档。的确,对于开发人员来说,文档很重要性,在这个类库完善后(大概1.0 版本后),我会抽时间来写的了。

  这些意见都很好,也希望其它朋友能够给我多提些意见。下面开始我们的教程。

  TreeGrid 是企业级开发中,最为常用的一个控件。在 JData 中,可以使用 TreeColumn 来实现。如下图所示:

  但是在使用的时候,有一些要注意的地方。

  第一:表的结构必须为最为常用的自连接方式来实现树形的。 如 Northwind 数据库的 Employee 表。

  第二:数据量不能过大。使用 TreeColumn 需要一次性把所有数据加载到客户端。数据量过大则不适合使用。(万一数据量大呢?如何是好???)

    Sys.onReady(function() {
      var e = new WebApplication.EmployeeMetaType();
      var treeDataSource = new JData.TreeDataSource("../Services/NorthwindService.asmx", "GetEmployees", 'InsertEmployee', 'UpdateEmployee', 'DeleteEmployee');
      treeDataSource.set_selector([e.EmployeeID, e.ReportsTo, e.Country, String.format('{0} + " " + {1} as Name', e.FirstName, e.LastName)]);
      treeDataSource.set_primaryKeyColumn(e.EmployeeID);
      treeDataSource.set_parentColumn(e.ReportsTo);
      var gridView = new JData.GridView(document.getElementById('gridView'));
      var columns = new Array();
      columns[columns.length] = new JData.BoundField(e.EmployeeID, null, '80px', null, true);
      columns[columns.length] = new JData.TreeColumn('Name', null, '180px', '120px', true);
      columns[columns.length] = new JData.BoundField(e.Country, null, '120px', null, true);
      var treeParentColumn = columns[columns.length] = new JData.TreeParentColumn('ReportsTo', 'ReportsTo', '120px', '114px');
      treeParentColumn.set_dataSource(treeDataSource);
      treeParentColumn.set_displayMember('Name');
      treeParentColumn.set_valueMember(e.EmployeeID);
      var commandColumn = columns[columns.length] = new JData.CommandField();
      commandColumn.get_itemStyle().set_width('80px');
      commandColumn.set_showEditButton(true);
      commandColumn.set_showCancleButton(true);
      commandColumn.set_showDeleteButton(true);
      gridView.set_columns(columns);
      gridView.set_dataSource(treeDataSource);
      gridView.set_caption('Employees');
      JData.JQueryUIStyle(gridView, null, { autoUpdateStyle: false });
      gridView.initialize();

      $addHandler($get('btnInsertEmployee'), 'click', function() {
        $('#dlgInsert').dialog('open');
      });
      var dataSource = new JData.WebServiceDataSource("../Services/NorthwindService.asmx", "GetEmployees");
      dataSource.set_selector([e.EmployeeID, e.FirstName, e.LastName, e.ReportsTo]);
      dataSource.select(null, function(items) {
        for (var i = 0; i < items.length; i++) {
          var option = document.createElement('option');
          option.value = items[i][e.EmployeeID];
          option.text = items[i][e.EmployeeID] + " " + items[i][e.FirstName];
          $get('ddlReportsTo').options.add(option);
        }
      });
      $('#dlgInsert').dialog({
        modal: true,
        autoOpen: false,
        buttons: {
          'OK': function() {
            var employee = new WebApplication.Employee();
            employee.FirstName = $get('txtFirstName').value;
            employee.LastName = $get('txtLastName').value;
            employee.ReportsTo = $get('ddlReportsTo').value == '' ? null : $get('ddlReportsTo').value;
            treeDataSource.insert(employee, function() {
              employee.Name = employee.FirstName + " " + employee.LastName;
              $('#dlgInsert').dialog('close');
            });
          }
        }
      });
    });

代码和创建 GridView 差不多,有两个值得注意的地方。

  1、在这里创建 TreeDataSource 对象,而不是 WebDataSource 对象。在创建完后,必须设置主键,和相关连的外键。如下面这段代码所示。

 var e = new WebApplication.EmployeeMetaType();
 var treeDataSource = new JData.TreeDataSource("../Services/NorthwindService.asmx", "GetEmployees", 'InsertEmployee', 'UpdateEmployee', 'DeleteEmployee');
 treeDataSource.set_selector([e.EmployeeID, e.ReportsTo, e.Country, String.format('{0} + " " + {1} as Name', e.FirstName, e.LastName)]);
 treeDataSource.set_primaryKeyColumn(e.EmployeeID);
 treeDataSource.set_parentColumn(e.ReportsTo);

  2、就是插入数据了。在这里插入数据不能使用 ColumnField 的 New 按钮。必须另外创建一个输入框来输入数据,然后通过 TreeDataSource 将数据提交到服务端。TreeColumn 对象会监听到 TreeDataSource 的 Insert 事件,当 TreeDataSource 执行完 insert 方法后,便会把数据插入到相应的行。如下面代码所示:

$('#dlgInsert').dialog({
   modal: true,
   autoOpen: false,
   buttons: {
   'OK': function() {
   var employee = new WebApplication.Employee();
   employee.FirstName = $get('txtFirstName').value;
   employee.LastName = $get('txtLastName').value;
   employee.ReportsTo = $get('ddlReportsTo').value == '' ? null : $get('ddlReportsTo').value;
   treeDataSource.insert(employee, function() {
   employee.Name = employee.FirstName + " " + employee.LastName;
   $('#dlgInsert').dialog('close');
   });
   }
  }
});


  本文演示请看:http://jdata.alinq.org/Demo/TreeGrid.html



相关阅读:
轻松配置Windows7/Ubuntu9双系统
花3分钟时间来关闭你电脑上没用的服务(加快你的电脑运行)
桌面中心(四)数据显示
JavaScript 脚本将当地时间转换成其它时区
ASP存储过程开发应用详解
Js+XML 操作
JS控件autocomplete 0.11演示及下载 1月5日已更新
如何查找运行系统里的“bad sql”语句
限制文本框中只能输入实数或整数,其它字符无效,有劳大家了!
php中将地址生成迅雷快车旋风链接的代码[测试通过]
js玩一玩WSH吧
Web站点的WinXX服务器安全解决方案
JS触发A标签的点击事件
取得硬盘数.bat
快速导航

Copyright © 2016 phpStudy |