ajax开发工具bindows使用指南：在线编辑树状视图

随着 Bindows 1.5 beta 的发布，我们现在支持可附加组件和在线编辑的树状视图和 OLAP 表格了。附加组件允许你将一个 Bindows 组件放置于一个树状视图中，并且这个组件将跟随树状视图一起移动和滚动。在线编辑允许你通过所给单元格中的可编辑组件来编辑一个树状视图中单元格内的内容。

BiAttachedComponentModel

附件组件和在线编辑的后端核心是 BiAttachedComponentModel 类。这是一个相对简单的类，它有三个的方法，它们都可被无任何副作用的覆盖。基本上你创建一个实例（或者一个子类）之后就是以你的喜好来覆盖这些方法了：

var am = new BiAttachedComponentModel;
am.getHasAttachedComponent = function ( x, y )
{
   return x == SPECIAL_COLUMN;
};
 
var cs = [];
am.getAttachedComponent = function ( x, y )
{
   if ( cs[y] )
      return cs[y];
 
   var c = new StarRatings;
   return cs[y] = c;
};
 
// set the attached component model on a tree view
g.setAttachedComponentModel( am );

BiInlineEditModel

在线编辑模型是 BiAttachedComponentModel 的一个子类。它每次可以附加一个组件——对一个确定单元格的编辑组件。要进入编辑模式，用户可以通过双击单元格或者按 F2 键来实现。这将为用来编辑的所给单元格组件调用编辑模型，如果有任何变化，他们将显示给用户。

一旦进入到编辑组件，用户可以（通常）通过按下 Enter 键来提交改变或者按下 Esc 键来取消改变。一些默认的编辑组件允许你通过箭头键或者 tab 键来操作其他单元格。

这样，从 API 的角度它是怎么工作的呢？通常的想法是覆盖 getEditType，getEditOptions 和/或 getCanEdit：

var iem = new BiInlineEditModel;
 
iem.getEditType = function ( x, y )
{
   switch ( y % 3 )
   {
      case 0:
         return BiInlineEditModel.EDIT_TYPE_STRING;
      case 1:
         return BiInlineEditModel.EDIT_TYPE_NUMBER;
      case 2:
         return BiInlineEditModel.EDIT_TYPE_ENUM;
   }
 
};
iem.getEditOptions = function ( x, y )
{
   switch ( y % 3 )
   {
      case 0:
         return {};
      case 1:
         return {minimum: 0, maximum: 1000};
      case 2:
         return [
            {userValue: 1, text: "One"},
            {userValue: 2, text: "Two"},
            {userValue: 3, text: "Three"}
         ];
   }
};
 
iem.getCanEdit = function ( x, y )
{
   return x != SPECIAL_COLUMN;
};
 
// set the inline editing model on a tree view
g.setInlineEditModel( iem );

这足够让你完成编辑工作了（对不同的行有不同的方式）。如果你只想完成文字编辑只需使用：

var iem = new BiInlineEditModel;
g.setInlineEditModel( iem );

到此为止，树状视图和编辑组件看上去可能已经不错了，不过他们还没有连接。连接树状视图和编辑模型需通过事件来完成。编辑模型在它将要显示一个组件之前触发一个叫做 "beforeshow" 的事件，这是设置编辑模型的 value 的一个很好的时机。当用户提交编辑模型的值时，将触发一个叫做 "change" 的事件，这是更新你的数据模型中潜在数据的一个好时机。

iem.addEventListener( "beforeshow", function ( e )
{
   iem.setValue( dm.getCellText( iem.getColumn(), iem.getRow() ) );
} );
iem.addEventListener( "change", function ( e )
{
   var v = iem.getValue();
   dm.setCellText( iem.getColumn(), iem.getRow(), v );
} );