帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:数据  Light  GRID  
Sensei Grid is a simple data grid library in JavaScript

  • 源代码名称:sensei-grid
  • 源代码网址:http://www.github.com/datazenit/sensei-grid
  • sensei-grid源代码文档
  • sensei-grid源代码下载
  • Git URL:
    git://www.github.com/datazenit/sensei-grid.git
  • Git Clone代码到本地:
    git clone http://www.github.com/datazenit/sensei-grid
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/datazenit/sensei-grid
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • Sensei网格 Build Status

    用JavaScript编写的简单数据网格。 数据网格是基于web的数据库管理工具 Datazenit的一部分。

    相关性:jQuery和下划线。js/lodash这里存储库中的示例也使用默认样式的Twitter Bootstrap。

    演示和屏幕截图

    演示:http://datazenit.com/static/sensei-grid/examples/index.html

    Sensei Grid Screenshot

    目标

    • 简单: Sensei网格将是一个没有无关功能的单一用途数据网格。
    • 小代码基: Bloatware和脏的解决方案/攻击将尽可以能地避免代码基础的小而整洁。
    • 尽管Sensei网格将保持简单,但是我们将认真努力,以方便扩展和定制扩展。
    • 稳定:Sensei网格由 Datazenit 支持,这意味着项目在经济上支持并且将不断维护和改进。

    安装

    获取所有必要文件的最简单方法是通过 Bower: 如果你不想使用 Bower,只需从最新版本release下载一个归档文件,或者克隆整个仓库。

    获得Sensei网格副本后,必须包括所有 dependecies,sensei-grid.js 和 sensei-grid.css。 Sensei网格依赖于jQuery和 lodash/下划线。js。 为了方便你,可以在 lib/ 文件夹中找到所有 dependecies。

    警告:默认情况下,网格不将任何样式应用到 table 中。 这意味着你需要创建自己的样式表,或者只使用 bootstrap.css,如示例 below 所示。

    <linkrel="stylesheet"type="text/css"href="dist/css/sensei-grid.css"/>
    <linkrel="stylesheet"type="text/css"href="lib/bootstrap/dist/css/bootstrap.min.css"/>
    <scriptsrc="lib/jquery/dist/jquery.min.js"></script>
    <scriptsrc="lib/lodash/lodash.min.js"></script>
    <scriptsrc="dist/sensei-grid.js"></script>

    基本用法

    定义数据 array。每行都由对象表示。

    var data = [
     {id:1, title:"test"},
     {id:2, title:"foo bar"}
    ];

    现在,必须在单独的array 中定义列,以便Sensei网格工作

    var columns = [
     {name:"id", type:"string"},
     {name:"title", type:"string"}
    ];

    使用数据和列初始化网格

    var grid =$(".example").grid(data, columns);

    register 至少有一个编辑器( BasicEditor与Sensei网格捆绑在一起)

    grid.registerEditor(BasicEditor);

    .example 容器中渲染数据网格。

    grid.render();

    绑定编辑器

    默认情况下,Sensei网格与几个网格编辑器捆绑在一起,这些编辑器可以注册为数据网格。

    可用编辑器列表:

    • BasicEditor - 用于编辑基本数据的简单文本字段
    • BooleanEditor - 布尔值的复选框编辑器( true/false )
    • TextareaEditor - 用于编辑大文本的大文本字段
    • SelectEditor - 下拉选择框从列表中选择一个值
    • DateEditor - 用于从日历中选择特定日期的日期时间编辑器,由 pickadate.js 提供
    • DisabledEditor - 无法编辑的示例编辑器
    • [new] AutocompleteEditor - 基于 typeahead.js的自动完成支持文本字段

    博客文章

    路线图

    计划用于即将发布的版本:

    • 删除/重复行键盘快捷方式
    • 新建行支持
    • 事件回调( 比如 ,保存,加载和渲染)
    • 字段类型( 比如 ,字符串。int。float )
    • 可选的列定义( 如果数据的结构很简单,则假定为默认列设置)
    • Firefox 兼容性问题
    • 网格的更多配置参数
    • 特定字段类型( 示例框编辑器可以在示例/示例。js中找到)的示例编辑器
    • 移动设备的触摸支持
    • 列排序回调
    • 列调整大小( 要讨论)
    • 实现撤消/恢复( 要讨论)


    文章标签:数据  Light  GRID  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语