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

最新推荐文章于 2021-03-07 15:02:21 发布
最新推荐文章于 2021-03-07 15:02:21 发布
阅读量1.4k 收藏 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下载地址

.NET跨平台
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WijMo.js 5.2的FlexGrid介绍[Knockout]
03-07
《WijMo.js 5.2的FlexGrid介绍——结合Knockout的高效数据绑定网格控件》 在Web开发领域，高效的数据显示和操作是必不可少的功能。Wijmo.js是ComponentOne公司推出的一套强大的JavaScript UI库，其中的FlexGrid控件...
Wijmo5 Flexgrid演示代码合集
04-01
Wijmo5，一款由 GrapeCity 公司开发的JavaScript UI库，其中的核心组件之一就是Flexgrid。它是一款强大的数据网格控件，具备丰富的功能和高度的灵活性，适用于构建复杂的Web应用程序。本篇文章将通过深入解读...
Wijmo5 Flexgrid基础教程：数据绑定
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
02-15 2642
Wijmo Enterprise下载> FlexGrid在JavaScript程序中启动 添加Wijmo引用；添加wijmo控件的扩展；在JavaScript中初始化wijmo控件；（可选）添加css和自定义的样式文件。 代码参考： 1 2 3 4 5 6 7 8 9 10 11 12
Wijmo5 Flexgrid基础教程(二)【增加和删除,自定义编辑器】
极客神殿
03-11 1487
对于表格控件，很基本的操作就是增加和删除，在WinForm平台下我们能够很轻易地实现。那么基于HTML5，我们又要怎么去实现这个功能呢？本文就介绍flexgrid的基本操作：增加删除。在学习增加和删除之前，我们需要了解wijmo5的另一个重要的概念：CollectionView。它由ICollectionView接口继承而来，用标准的JavaScript数组提供数据。由于CollectionView
WijMo.js 5.2使用FlexGrid实现日历
极客神殿
03-04 599
Index.cshtml @{ ViewBag.Title = "Home Page"; } script src="/Scripts/jquery-1.10.2.min.js">script> script src="/wijmo/controls/wijmo.min.js" type="text/javascript">script> script src="/wijmo/co
Angular4 后台管理系统搭建（2） - flexgrid 单元格模板 wjFlexGridCellTemplate 的坑
weixin_30748995的博客
06-30 617
这几天中了很多坑，尤其是两个大坑。先是运行环境的坑，在是flexgrid单元格内部模板的坑。这里记录下。 一开始我遇见一些很奇怪的问题，按网上的说法，别人这么写代码都正常，就在我机器上不正常。按以前的经验，我觉得是不是版本的问题。于是就把 angular 升级到 4.2.4。 typescript升级到2.4.1。结果这两个最新的库合在一起，zone.js就出问题了。是一个很奇怪的类型转...
前端开发工具包-WijmoJS，部署授权详解
weixin_34320724的博客
09-17 238
概述使用许可证密钥删除WijmoJS的评估水印。可以通过三个简单的步骤完成：购买WijmoJS前端开发工具包并安装，分两种形式：直接引用和NPM安装。申请部署授权Key。使用WijmoJS前端开发工具包的setLicenseKey方法将分发licenseKey应用于您的应用程序，如下面的示例所示。如果使用脚本标记加载WijmoJS，请按如下方式调用setLicenseKey：&lt;!-- Wij...
深入解析 MSHFlexGrid 和 MSFlexGrid 控件
李赛男
03-07 2809
MSFlexGrid1 一字之差，到底是个啥
C1Wijmo-Eval_5.20143.25
12-30
wijmo 的试用版本，可以使用30天。如果要是有破解的版本会第一时间拿来给大家分享。
Microsoft FlexGrid控件.pdf
10-11
Microsoft FlexGrid控件，使用教程，很好的参考资料！！！
flexigrid列表控件
02-26
基于jquery的flexigrid列表控件，改进了列表自适应宽度方式，增加checkbox选择框
WinCC FlexGrid控件
09-28
WinCC FlexGrid控件， 控件使用方法， 操作手册，入门手册
FLEXGRID控件使用示范(用于VB6.0版)
10-02
这是我使用flexgrid控件的一个示范工程,用VB开发,希望与大家分享EMAIL:xiaochuan_yuan@hotmail.com
FlexGrid控件显示属性.txt
09-24
VSFlexGrid Pro支持ADO和OLE DB，支持统一的字符编码以及DAO数据的 存取，提供多重数据连接的选择。 ADO/OLEDB、DAO可连接到二维、三维 数组或其他VSFlexGrid控件，用户也可创建用户自己的数据源类。甚至可以在无界模式中使用表格，或将表格连接到变量数组及一用户可自己开发的数据 源。
wijmo控件使用
11-22
wijmo控件，ComponentOne的wijmo控件，支持html5
C1Wijmo-Eval_5.20171.300.zip
06-18
开发者可以在这里找到wijmo.css、wijmo.all.min.js等核心文件，以及其他特定组件的JavaScript和CSS文件。 3. **NpmImages**：这部分可能包含与NPM（Node Package Manager）相关的图像资源。因为Wijmo 5也支持通过...
VC中Microsoft FlexGrid控件的使用及合并单元格、可编辑操作
weixin_30632899的博客
05-25 471
1. 给FlexGrid控件绑定成员变量：m_FlexGrid。 2. 设置行列数 m_FlexGrid.SetCols(4); //设置列数 m_FlexGrid.SetRows(6); //设置行数 3. 设置固定行数和固定列数 m_FlexGri...
CMSFlexGrid的用法
miao2034056的专栏
07-26 2839
1. 给FlexGrid控件绑定成员变量：m_FlexGrid。 2. 设置行列数               m_FlexGrid.SetCols(4);                   // 设置列数               m_FlexGrid.SetRows(6);                 // 设置行数 3. 设置固定行数和固定列数           
wijmo.min.js 在哪里下载
最新发布
05-20
wijmo.min.js 是 Wijmo 的 JavaScript 文件。你可以在 Wijmo 官网的下载页面中下载它。具体步骤如下： 1. 打开 Wijmo 官网：https://www.grapecity.com/wijmo。 2. 点击页面右上角的 "Download" 按钮。 3. 在下载...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值