WEB开发网
开发学院网页设计JavaScript JData 使用教程(三) 实现增删改功能 阅读

JData 使用教程(三) 实现增删改功能

 2010-06-28 00:00:00 来源:WEB开发网   
核心提示:在某些 RIA 框架中,实现增删改,JData 使用教程(三) 实现增删改功能,可能要写一大堆的服务端代码,但是在 JData 里,具体请看文件名为 Cagegory.html 的例子,代码Sys.onReady(function(){varc=newWebApplication.CategoryMetaType();

在某些 RIA 框架中,实现增删改,可能要写一大堆的服务端代码,但是在 JData 里,只需要写极少量的代码。如果能利用上代码生成器,甚至可以不写代码。现在我们来看一个比较典型的例子。

服务端代码如下:

代码

    [WebMethod]
    public virtual ExecuteResult UpdateCategory(Dictionary<string, object> item)
    {
      return base.Update<Category>(item);
    }
    [WebMethod]
    public virtual ExecuteResult DeleteCategory(Dictionary<string, object> item)
    {
      return base.Delete<Category>(item);
    }    
    [WebMethod]
    public virtual ExecuteResult InsertCategory(Dictionary<string, object> item)
    {
      var result = base.Insert<Category>(item);
      if(result.AffectedRowCount > 0)
      {
        result.Members = new { 
          CategoryID = item["CategoryID"] 
        };
      }
      return result;
    } 

由于 CategorID 是自增长类型,它的数值是在插入数据库后生成的。因此在插入数据后,需要将该数值返回到客户端。下面这段代码就是用于将服务端生成的属性返回到客户端,而 result.AffectedRowCount > 0 则表示成功将数据添加到数据库。

      if(result.AffectedRowCount > 0)
      {
        result.Members = new { 
          CategoryID = item["CategoryID"] 
        };
      }

客户端代码如下,只需要添加一个 CommandField  即可实现增、删、改功能 ,具体请看文件名为 Cagegory.html 的例子。 

JData 使用教程(三) 实现增删改功能JData 使用教程(三) 实现增删改功能代码

Sys.onReady(function() {
  var c = new WebApplication.CategoryMetaType();
  var dataSource = new JData.WebServiceDataSource("../Services/NorthwindService.asmx", "GetCategories", "InsertCategory", "UpdateCategory", "DeleteCategory");
  dataSource.set_selector([c.CategoryID, c.CategoryName, c.Description]);
  dataSource.set_sorting('CategoryID desc');
  var columns = new Array();
  columns[columns.length] = new JData.BoundField(c.CategoryID, null, '60px', '56px', true);
  columns[columns.length] = new JData.BoundField(c.CategoryName, null, '120px', '112px', false);
  columns[columns.length] = new JData.BoundField(c.Description, null, '220px');
  columns[columns.length] = new JData.CommandField('', '120px', true, true, true, true);
  var gridView = new JData.GridView($get('gridView'));
  gridView.set_dataSource(dataSource);
  gridView.set_columns(columns);
  gridView.set_allowPaging(true);
  gridView.set_caption('Cagegoires');
  gridView.set_pageSize(15);
  gridView.get_pagerSettings().set_mode(JData.PagerButtons.NumericFirstLast);
  JData.JQueryUIStyle(gridView);
  gridView.initialize();
});

Demo 下载:http://jdata.alinq.org ,完整代码在 /Demo/Category.html 中。

编缉推荐阅读以下文章

  • JData 使用教程(四) 对输入数据进行验证(客户端验证)
  • JData 使用教程(二) 对显示的数据进行格式化
  • JData 使用教程(-) 加载数据

Tags:JData 使用 教程

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接