首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基于 Angular Material 的 Data Grid 设计实现

这几天又重构了一下官网示例,目前的 API 文档放在了 gitbook 上,暂时还没有和官网整合,国内访问会比较慢。本文会介绍 Data Grid 的使用方法及比较好的一些功能实现。...说点题外话,开发一款插件最大的难度不在于功能的实现,而在于如何去设计插件。 什么是 Data Grid? Data Grid 本质上就是通过 数据+列定义+配置项 来渲染表格的插件。...目前市面上功能最全的 Data Grid 是 ag-grid,很多组件库也有自己的 Data Grid 实现,比如 Ignite UI,Kendo UI。...Extensions Data Grid 简介 Extensions Data Grid 的功能实现参考了 ag-grid 以及其它插件,重构时对变量及参数命名进行了很细致的考究。...#expansionTpl let-row> {{row.name}} 在列定义中设置 showExpand, 确定在哪个列显示展开符号。

5.1K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    GridView利用CheckBox复选框列实现单选功能

    大家好,又见面了,我是你们的朋友全栈君。 自Dev13.2开始,GridView提供了自带的复选框列,该功能能实现多选操作,方便了不少,那如果想把这个自带的复选框列做成单选,那就需要单独处理了。...先补充一下,GridView的复选框列怎么设置,如下代码片段,只要设置前面两个属性即可在GridView看到有一列复选框(BandedGridView较老版本不支持这个功能,应该得在19.2或者20之后的版本才支持...,具体可以看看自己的版本,如果设置无效,那么说明不支持): //设置显示复选框列 gridview.OptionsSelection.MultiSelectMode = DevExpress.XtraGrid.Views.Grid.GridMultiSelectMode.CheckBoxRowSelect...= 45;//设置复选框列的宽度 了解如何显示复选框列,那么想实现单选的功能就需要检测选择操作时候对其他行的CheckBox进行取消选择,GridView提供了一个SelectionChanged事件...view,string selectCaption="选择") { if (view == null) return; //设置显示复选框列

    2K20

    20 多个好用的 Vue 组件库

    特点如下: 多列排序 非连续选择 过滤数据和验证数据 导出文件 有条件的格式化 合并单元格 隐藏行/列 上下文菜单和注释 Ag Grid Vue 地址:https://github.com/ag-grid.../ag-grid Ag-Grid 是一个基于 Vue.js 的数据表格组件。...其中,“ag” 表示 “agnostic”。内部 ag-Grid 引擎是在 TypeScript 中实现的,零依赖关系。...ag-Grid 通过包装器组件支持 Vue,你可以在应用程序中,就像其他任何 Vue 组件一样使用 ag-Grid。它支持通过属性绑定传递配置,通过事件绑定来处理事件。...每个图标都设计在一个24×24的网格上,强调简单,一致性和易读性。很多大厂出品的前端框架都内置了这款可以免费商用的图标。

    7.9K10

    JS如何实现勾选全部复选框和不全选复选框

    前言 在一些后台管理系统里面,针对全选,复选框是一个很常见的操作,复选框可以执行多项选择的一种控件,有时,为了方便用户选中所有的复选框,网页界面 会提供一个选中所有复选框的功能,怎么实现一个复选框全部被选中的效果呢...[i].checked = true; // 选中 } }else { // 遍历所有的复选框 for(var i = 0;i<arr.length...;i++) { arr[i].checked = false; // 不选中 } } } 如下是html 在提交的时候,是需要将具体的参数值,传递给后端的,而并非一些UI组件示例库当中 实现一下效果,就完事了的,往往需要自己进行二次特殊处理的 以下是上面全选,复选的示例代码 ...,是一个很常见基础的业务实现 全选与全不选的复选框是否被勾选,是由它的checked属性决定的,checked的属性值若为true那么状态为选中,若为false那么不选中 前端UI显示,与具体要向后端传入的值

    6.5K60

    ag-grid设置选中单行多行及获取选中行数据

    ag-Grid 是比较实用的数据表格组件,最近接触到了相关的项目,简单记录一下设置选中单行多行和获取选中行数据的方法。...设置多行选中 rowSelection 行选择的类型,设置为 'single' 或者 'multiple' 启用单选和多选。...{   headerHeight: 40,   rowSelection: 'multiple', // 单选 single | 多选 multiple   suppressContextMenu: true... rows = gridRef.current.getSelectedRows(); if (rows && rows.length) {   // 得到一个数组,如果是多选,会显示多条   // 如果是单选...; } 可以根据自己的需求,进行更进一步的扩展。 未经允许不得转载:w3h5-Web前端开发资源网 » ag-grid设置选中单行多行及获取选中行数据

    1.2K20

    20多个好用的 Vue 组件库,请查收!

    .. handsontable是一款页面端的表格交互插件,可以通过它加载显示表格内容,能够支持合并项、统计、行列拖动等。...特点 多列排序 非连续选择 过滤数据和验证数据 导出文件 有条件的格式化 合并单元格 隐藏行/列 上下文菜单和注释 Ag Grid Vue 地址:https://github.com/ag-grid/...Ag-Grid 是一个基于Vue.js的数据表格组件。其中,“ag” 表示 “agnostic”。内部 ag-Grid引擎是在TypeScript中实现的,零依赖关系。...ag-Grid通过包装器组件支持Vue,你可以在应用程序中,就像其他任何Vue组件一样使用ag-Grid。它支持通过属性绑定传递配置,通过事件绑定来处理事件。...Feather 是一套面向设计师和开发者的开源图标库,是一个简单漂亮的开源图标库。 每个图标都设计在一个24×24的网格上,强调简单,一致性和易读性。

    7.6K10

    【JavaScript数据网格】上海道宁51component为你带来企业JS开发人员首选的数据网格——AG Grid

    AG Grid构建AG Grid是因为没有其他数据网格能够满足AG Grid的开发需求,正如AG Grid在AG Grid的历史中所解释的那样AG Grid的坚固设计使其能够管理: 数据网格的核心特征和...AG Grid提供了其他网格无法比拟的功能,例如AG Grid的集成图表解决方案 允许用户在无需任何开发工作的情况下直观地探索数据。AG Grid将所有功能添加到一个网格中。...这两套代码都可以在 Github 上找到,您可以在其中查看代码并提出问题和拉取请求。开源性质允许社区为 AG Grid 团队提供建议并充当代码审查者。闭源项目没有相同的社区支持或知名度。...用户将能够在 Excel 中编辑数据,然后在完成后将数据复制回网格中。03、栏目菜单列菜单从列标题下拉。使用默认选项或提供您自己的选项。04、上下文菜单右键单击单元格时会出现上下文菜单。...09、范围选择将鼠标拖到单元格上以创建范围选择。这对于突出显示数据或复制到剪贴板非常方便。10、设置过滤器Set Filter的工作方式与Excel类似,提供复选框以从集合中选择值。

    4.4K40

    Ext基础

    这样,Jack Slocum在写技术博客的同时以 Yui-Ext的形式开放自己编写的 UI,包括 Grid、Tree等UI组件。...Ext Grid的功能包括选择一条或多条记录、高亮显示选择行、调整列宽、显示行号、支持复选框以及支持本地和远程分页。...( [ new Ext.grid.RowNumberer(), //自动显示行号 sm,//添加复选框 {header:'编号', dataIndex:'empId',sortable:true}...控件的分页功能 ​训练技能点​ Ø 使用 Ext Grid 控件分页功能 ​需求说明​ 在完成上一任务显示功能的基础上,使用Ext Grid 控件实现数据分页,效果如图9.2.2所示。...三、操作题​ 使用Ext JS 的 Grid控件查询学校学生信息,实现选择一条或多条记录、高亮显示选择行、调整列宽、显示行号、支持复选框功能。

    15010

    【Android从零单排系列十九】《Android视图控件——CheckBox》

    一 CheckBox基本介绍 Checkbox(复选框)是一种常用的UI组件,它提供了两个状态:选中和未选中。用户可以通过点击复选框来切换其状态。...三 CheckBox常见方法和属性 常见属性: checked:表示复选框的选中状态,可以设置为"true"表示选中,或者"false"表示未选中。 text:设置复选框旁边显示的文本内容。...setChecked(boolean checked):设置复选框的选中状态,传入"true"表示选中,传入"false"表示未选中。...toggle():切换复选框的选中状态,如果当前为选中状态则切换为未选中,反之亦然。 setText(CharSequence text):设置复选框旁边显示的文本内容。...例如,在Android开发中,你可以通过调用setChecked(true)方法将复选框设置为选中状态,通过调用getText().toString()方法获取复选框旁边显示的文本内容,以及使用setEnabled

    32130

    AgGrid框架的使用感受及前景分析

    免责声明:文章源于本人闲情雅致,没有任何广告意图 我向来是不屑于使用前端框架的,最多用一些ui组件,但是ag-grid这个框架太TM好用了。...Ag-Grid:媲美Excel的web框架 完美的集合关系模型如何在前端展现呢,最好的办法呢就是画一个表格,经过1个多月的框架抉择,我终于在能力矩阵2.X版本中选择用aggrid来重构整个系统。...(当时我在外网上海淘一款用JavaScript来实现Excel功能的表格框架,在一个不愿意透露姓名的热心群众的推荐下,我来到首页上大言不惭地写着“The Best JavaScript Grid in...著名的前端框架ag-grid就是在这个理论上诞生的。 简而言之,表格即图表,图表即表格,它们在数据上是一致的,只是表现形式不同而已。...设计focus对象 focus对象是我常用的一种自定义对象,通常挂载在window.app上,但在aggrid这个重量级框架面前,也可以挂载在ag-grid>ag-grid>元素上面。

    6K40

    Android开发笔记(三十七)按钮类控件

    无法在某个区域显示小图; 3、ImageButton上的图像可按比例进行拉伸,而Button上的大图会拉伸变形(因为背景图无法按比例拉伸); 从上面可以看出,Button的适应面更广,所以实际开发中基本使用...xml布局上新加的属性设置: checked : 指定按钮的勾选状态,true表示勾选,false表示未勾选。 button : 指定左侧勾选图标的图形。...setOnCheckedChangeListener : 设置勾选变化的监听器 isChecked : 判断按钮是否选中 CheckBox CheckBox是复选框,点击勾选,再点击则取消勾选...其实Switch就是个特殊UI的CheckBox,在选中与取消选中时,可展现的界面元素要比复选框要丰富些。 xml布局上新加的属性设置: textOn : 指定右侧开启时候的文本。...与之类似的还有ios的UISwitch开关控件,下面是UISwitch控件开关两个状态下的UI: ? ? Android自带的Swtich与ios的UISwitch比起来,默认的UI很难看。

    1.6K30
    领券