WijMo.js 5.2的FlexGrid控件使用示例

最新推荐文章于 2024-09-17 07:23:59 发布
最新推荐文章于 2024-09-17 07:23:59 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： Wijmo5 Flexgrid

Default.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FlexGrid Introduction</title>

    <!-- ensure IE uses the latest version of IE (yes, yes...) -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Third Party -->
    <script src="http://knockoutjs.com/downloads/knockout-3.2.0.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />

    <!-- Wijmo引用 -->
    <script src="scripts/vendor/wijmo.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.input.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.knockout.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles/vendor/wijmo.min.css" />


    <!-- app styles -->
    <link href="styles/app.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="header visible-xs visible-sm">
        <div class="container">
            <h1>
                FlexGrid 101
            </h1>
        </div>
    </div>
    <div class="header hidden-xs hidden-sm">
        <div class="container">
            <img src="resources/wijmo5.png" />
            <h1>
                FlexGrid示例
            </h1>
            <p>
                本页面显示如何开始使用Wijmo的FlexGrid控件.
            </p>
        </div>
    </div>
    <div class="container">

        <h2>
            开始
        </h2>
        <div class="row">
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div data-bind="wjFlexGrid: { itemsSource: data }"></div>
            </div>
        </div>


        <h2>
            列定义
        </h2>

        <div class="row">

            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div data-bind="wjFlexGrid: { itemsSource: data }">
                    <div data-bind="wjFlexGridColumn: { header: 'Country', binding: 'country', width: '*' }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Date', binding: 'date' }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Revenue', binding: 'amount', format: 'n0' }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Active', binding: 'active' }"></div>
                </div>
            </div>
        </div>

        <h2>
            选择模式
        </h2>

        <div class="row">
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div data-bind="wjFlexGrid: { itemsSource: data, selectionMode: selectionMode }"></div>
                <div data-bind="wjMenu: { value: selectionMode, header: 'Selection Mode' }">
                    <span data-bind="wjMenuItem: { value: 'None' }">None</span>
                    <span data-bind="wjMenuItem: { value: 'Cell' }">Cell</span>
                    <span data-bind="wjMenuItem: { value: 'CellRange' }">CellRange</span>
                    <span data-bind="wjMenuItem: { value: 'Row' }">Row</span>
                    <span data-bind="wjMenuItem: { value: 'RowRange' }">RowRange</span>
                    <span data-bind="wjMenuItem: { value: 'ListBox' }">ListBox</span>
                </div>
            </div>
        </div>

        <h2>
            编辑
        </h2>

        <div class="row">
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div data-bind="wjFlexGrid: { itemsSource: data }">
                    <div data-bind="wjFlexGridColumn: { header: 'ID', binding: 'id', isReadOnly: true, width: 50 }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Country', binding: 'country', width: '*' }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Date', binding: 'date' }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Revenue', binding: 'amount', format: 'n0' }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Active', binding: 'active' }"></div>
                </div>
            </div>
        </div>

        <h2>
            分组
        </h2>

        <div class="row">
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div data-bind="wjFlexGrid: { itemsSource: cvGroup }">
                    <div data-bind="wjFlexGridColumn: { header: 'Country', binding: 'country', width: '*' }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Date', binding: 'date' }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Revenue', binding: 'amount', format: 'n0', aggregate: 'Sum' }"></div>
                </div>
                <div data-bind="wjMenu: { value: groupBy, header: 'Group by' }">
                    <span data-bind="wjMenuItem: { value: '' }">(no grouping)</span>
                    <span data-bind="wjMenuItem: { value: 'country' }">Country</span>
                    <span data-bind="wjMenuItem: { value: 'amount' }">Revenue</span>
                    <span data-bind="wjMenuItem: { value: 'date' }">Date</span>
                    <span data-bind="wjMenuItem: { value: 'country,date' }">Country and Date</span>
                    <span data-bind="wjMenuItem: { value: 'country,amount' }">Country and Revenue</span>
                    <span data-bind="wjMenuItem: { value: 'country,date,amount' }">Country, Date, and Revenue</span>
                </div>
            </div>
        </div>


        <h2>
            过滤
        </h2>

        <div class="row">
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div data-bind="wjFlexGrid: { itemsSource: cvFilter }"></div>
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-filter"></span></span>
                    <input type="text" data-bind="value: filter, valueUpdate: 'input'" class="form-control" placeholder="filter" />
                </div>
            </div>
        </div>


        <h2>
            分页
        </h2>
        <div class="row">

            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div data-bind="wjFlexGrid: { itemsSource: cvPaging }" style="height:auto"></div>
                <div class="btn-group">
                    <button type="button" class="btn btn-default"
                            data-bind="click: function () { cvPaging().moveToFirstPage() },
                                   disable: cvPaging().pageIndex <= 0">
                        <span class="glyphicon glyphicon-fast-backward"></span>
                    </button>
                    <button type="button" class="btn btn-default"
                            data-bind="click: function () { cvPaging().moveToPreviousPage() },
                                   disable: cvPaging().pageIndex <= 0">
                        <span class="glyphicon glyphicon-step-backward"></span>
                    </button>
                    <button type="button" class="btn btn-default" disabled style="width:100px">
                        <span data-bind="text: cvPaging().pageIndex + 1"></span> / <span data-bind="    text: cvPaging().pageCount"></span>
                    </button>
                    <button type="button" class="btn btn-default"
                            data-bind="click: function () { cvPaging().moveToNextPage() },
                                   disable: cvPaging().pageIndex >= cvPaging().pageCount - 1">
                        <span class="glyphicon glyphicon-step-forward"></span>
                    </button>
                    <button type="button" class="btn btn-default"
                            data-bind="click: function () { cvPaging().moveToLastPage() },
                                   disable: cvPaging().pageIndex >= cvPaging().pageCount - 1">
                        <span class="glyphicon glyphicon-fast-forward"></span>
                    </button>
                </div>
            </div>
        </div>


        <h2>
            主-细节
        </h2>
        <div class="row">
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div data-bind="wjFlexGrid: { itemsSource: cvFilter, isReadOnly: true,  }">
                    <div data-bind="wjFlexGridColumn: { header: 'Country', binding: 'country', width: '*' }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Date', binding: 'date' }"></div>
                </div>
                <dl class="dl-horizontal">
                    <dt>ID</dt>
                    <dd><span data-bind="text: cvFilterCurrentItem().id"></span></dd>
                    <dt>Country</dt>
                    <dd><span data-bind="text: cvFilterCurrentItem().country"></span></dd>
                    <dt>Date</dt>
                    <dd><span data-bind="text: format(cvFilterCurrentItem().date, 'd')"></span></dd>
                    <dt>Revenue</dt>
                    <dd><span data-bind="text: format(cvFilterCurrentItem().amount, 'n2')"></span></dd>
                </dl>
            </div>
        </div>

        <h2>
            单元格模板
        </h2>
        <div class="row">
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div data-bind="wjFlexGrid: { itemsSource: data }">
                    <div data-bind="wjFlexGridColumn: { header: 'Country', binding: 'country', width: '*', isReadOnly: true }">
                        <img data-bind="attr: { src: 'resources/' + $item().country + '.png' }" />
                        <span data-bind="text: $item().country"></span>
                    </div>
                    <div data-bind="wjFlexGridColumn: { header: 'Date', binding: 'date' }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Revenue', binding: 'amount', format: 'n0' }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Active', binding: 'active' }"></div>
                </div>
            </div>
        </div>


        <h2>
            条件样式
        </h2>
        <div class="row">
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div data-bind="wjFlexGrid: { itemsSource: data, allowResizing: 'None' }">
                    <div data-bind="wjFlexGridColumn: { header: 'Country', binding: 'country', width: '*' }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Date', binding: 'date' }"></div>
                    <div data-bind="wjFlexGridColumn: {
                            header: 'Revenue',
                            binding: 'amount',
                            format: 'n0' },
                            wjStyle: { color: getAmountColor($item().amount) }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Active', binding: 'active' }"></div>
                </div>
            </div>
        </div>

        <h2>
            主题
        </h2>

        <div class="row">
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div data-bind="wjFlexGrid: { itemsSource: data }" class="custom-flex-grid"></div>
            </div>
        </div>


        <h2>
            树形和分层数据
        </h2>

        <div class="row">
            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div class="custom-flex-grid"
                     data-bind="wjFlexGrid: {
                        itemsSource: treeData,
                        childItemsPath: 'items',
                        allowResizing: 'None',
                        selectionMode: 'ListBox',
                        headersVisibility: 'None' }">
                    <div data-bind="wjFlexGridColumn: { binding: 'name', width: '*' }"></div>
                    <div data-bind="wjFlexGridColumn: { binding: '', width: 80, align: 'center' }"></div>
                </div>
            </div>
        </div>


        <h2>处理null值</h2>
        <div class="row">

            <div class="col-md-6">
                <h4>Result (live):</h4>
                <div data-bind="wjFlexGrid: { itemsSource: data }">
                    <div data-bind="wjFlexGridColumn: { header: 'Country', binding: 'country', width: '*', isRequired: true }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Date', binding: 'date', isRequired: false }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Revenue', binding: 'amount', format: 'n0', isRequired: false }"></div>
                    <div data-bind="wjFlexGridColumn: { header: 'Active', binding: 'active', isRequired: false }"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 脚本 -->
    <script src="scripts/bindings/appBindings.js"></script>
    <script src="scripts/viewmodels/appVM.js" type="text/javascript"></script>
    <script src="scripts/app.js" type="text/javascript"></script>

</body>
</html>

运行结果如图:

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

Demo下载地址

使用数据表构建更智能的 Angular 应用
控件与插件之大全
02-12 145
Wijmo 是一套完整的可扩展、快速、灵活的 JavaScript UI 组件，以 TypeScript 编写而成。与框架无关的 Wijmo 组件包括对 Angular、React、Vue 和 Web Components 等顶级框架的一流支持。Wijmo Enterprise 拥有 100 多个动态 UI 组件，可帮助您将开发时间缩短一半，让您可以使用自己喜欢的 JavaScript 框架构建轻量级、高性能的 JavaScript 应用程序。
WijMo.js 5.2的FlexGrid介绍[Knockout]
03-07
《WijMo.js 5.2的FlexGrid介绍——结合Knockout的高效数据绑定网格控件》 在Web开发领域，高效的数据显示和操作是必不可少的功能。Wijmo.js是ComponentOne公司推出的一套强大的JavaScript UI库，其中的FlexGrid控件...
wijmo-grid-customizer:用于自定义 Wijmo Grid 的 AngularJS 服务
07-01
Wijmo 网格定制器 用于自定义 Wijmo Grid 的 AngularJS 服务
Wijmo5 Flexgrid基础教程：数据绑定
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
02-15 2719
Wijmo Enterprise下载> FlexGrid在JavaScript程序中启动 添加Wijmo引用；添加wijmo控件的扩展；在JavaScript中初始化wijmo控件；（可选）添加css和自定义的样式文件。 代码参考： 1 2 3 4 5 6 7 8 9 10 11 12
wjimo组件表格使用（wj-flex-grid标签属性）
Fightforyourown的博客
05-16 1160
wjimo组件表格使用（wj-flex-grid标签属性）
Wijmo5 Flexgrid基础教程(二)【增加和删除,自定义编辑器】
极客神殿
03-11 1596
对于表格控件，很基本的操作就是增加和删除，在WinForm平台下我们能够很轻易地实现。那么基于HTML5，我们又要怎么去实现这个功能呢？本文就介绍flexgrid的基本操作：增加删除。在学习增加和删除之前，我们需要了解wijmo5的另一个重要的概念：CollectionView。它由ICollectionView接口继承而来，用标准的JavaScript数组提供数据。由于CollectionView
将数据分组为可管理的段-Wijmo FlexGrid
最新发布
控件与插件之大全
09-17 397
Wijmo FlexGrid​​​​​​​网格控件中的分组/汇总功能使用户能够根据特定标准对行进行分组，从而有效地对数据进行分类和分析。此功能允许聚合每个组内的数据，提供有价值的摘要，例如总计、平均值、计数等。通过以更结构化的方式组织信息，用户可以更深入地了解数据中的趋势、模式和异常值
FlexGrid在WijMo.js 5.2中与Knockout的集成应用
标题中的"WijMo.js 5.2的FlexGrid介绍[Knockout]"表明本文的知识点围绕WijMo.js 5.2版本中的FlexGrid组件展开，同时涉及Knockout技术进行数据绑定。WijMo是ComponentOne提供的一系列基于Web的JavaScript控件，...
wijmo.grid.FlexGrid的validateEdits的使用方法
09-07
Wijmo Grid是一个基于jQuery UI的JavaScript组件库，它提供了一个名为FlexGrid的数据网格控件。`wijmo.grid.FlexGrid.validateEdits`方法用于验证用户在表格中的编辑操作是否有效。这个方法通常会在用户提交表单之前...
wijmo.grid.FlexGrid的invalidInput用法
09-07
wijmo.grid.FlexGrid 的 `invalidInput` 是一个事件处理程序，它会在用户输入的数据不符合指定验证规则时触发。FlexGrid 是一种基于 Web 的表格控件，用于展示和编辑数据。 当你设置了一个列的 `validationRule` ...
画面点击提交按钮，如何判断wijmo.grid.FlexGrid的itemValidator是否表单验证通过
09-07
在Wijmo Grid组件中，当你点击FlexGrid的提交按钮时，想要判断itemValidator（即单元格验证器）是否通过表单验证，你需要做以下几个步骤： 1. 首先，在`wijmo.widget.FlexGrid`的事件处理器中，通常监听`...
Wijmo5 Flexgrid基础教程(一)【数据绑定,DataMap】
极客神殿
03-11 1727
FlexGrid在JavaScript程序中启动 添加Wijmo引用； 添加wijmo控件的扩展； 在JavaScript中初始化wijmo控件； （可选）添加css和自定义的样式文件。 代码参考：<head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type=&
Wijmo5 Flexgrid基础教程(三)【InlineEdit,格式化单元格】
极客神殿
03-11 1221
对于flexgrid，可以直接在单元格内进行编辑。但另外还有一种编辑方式，即在一行添加按钮，统一的编辑和提交数据。本文主要介绍给flexgrid添加编辑按钮列，并通过编辑按钮设置编辑。在上一篇自定义编辑器中，我们介绍了如何自定义编辑器，主要使用的就是itemFormatter功能。在本文中，我们依然要使用这个itemFormatter功能设置编辑列。创建buttons列在flexgrid的colum
Wijmo5 Flexgrid基础教程(六)【右键菜单,动态加载右键菜单】
极客神殿
03-12 747
本文介绍如何给Wijmo5 flexgrid添加右键菜单，代码使用纯JavaScript代码实现。首先添加flexgrid添加的方法可以参考前面的教程：数据绑定。然后添加menu的相关文件(js和css文件）添加代码如下：<!--Wijmo Widgets CSS--> <link href="script/jquery.wijmo-pro.all.3.20153.83.min.css" rel="
wijmo 通过cell内控件的点击事件获得点击的cell 行和列
weixin_41032420的博客
05-24 432
theGrid.hostElement.addEventListener('click', function(e) { if (e.target.className === 'staff_change_icon') { var ht = theGrid.hitTest(e); self.openChangeStaffSlideMenu(self.grid...
Angular4 后台管理系统搭建（2） - flexgrid 单元格模板 wjFlexGridCellTemplate 的坑
weixin_30748995的博客
06-30 650
这几天中了很多坑，尤其是两个大坑。先是运行环境的坑，在是flexgrid单元格内部模板的坑。这里记录下。 一开始我遇见一些很奇怪的问题，按网上的说法，别人这么写代码都正常，就在我机器上不正常。按以前的经验，我觉得是不是版本的问题。于是就把 angular 升级到 4.2.4。 typescript升级到2.4.1。结果这两个最新的库合在一起，zone.js就出问题了。是一个很奇怪的类型转...
javascript模块化之ES5、ES6案例实战
林大侠
11-15 577
一、模块化   后端模块化：类与类之间调用，比如Controller调用service过程。   前端模块化：js文件之间的调用。 二、es5模块化操作 （1）被调用01.js // 定义成员： //相加方法 const sum = function(a,b){ return parseInt(a) + parseInt(b) } //相减方法 const subtract = funct...
HTML5 Wijmo：控制 Wijmo Grid 插件的编辑模式
weixin_30550081的博客
04-30 285
Wijmo jQuery 插件经常应用于在财务类网站中创建平滑和良好用户体验的交互表格。WijGrid 插件用于显示、排序、分组和编辑数据。今天我们来分享下如何控件WijGrid插件的编辑模式。 在本篇博客汇总我们将会实现通过以下方式来是 WijGrid 进入编辑状态： 单击 双击 特定列 我们可以通过设置 allowEditing 属性允许 WijGrid 编辑。默认情况下 W...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值