Alt:图片分类 7.度量 在设计的过程中，我们经常会使用一套规范的度量标准，来保持产品的一致性，分别为圆角值、间距、大小。...Alt:阴影参数 9.组件 常用的UI组件（Component）： Button控件、下拉框、选择框（单选\复选框）、时间选择器、输入框、搜索框、进度条、分页器、提示框、警告框、表格、弹出面板、数字步进器...Alt:下拉框设计规范 选择框（单选\复选框） 顾名思义，单选框是众多选择里面选一个，而复选框是众多选择里面可以无限制选择。单选框和复选框都需要三个状态，即未选中状态、选中状态和不可点击状态。...Alt:单选框/复选框设计规范 时间选择器 时间选择器是选择年月日的组件，分别对应年月日星期的信息，在设计的时候需要考虑到4个状态，分别是Select、Not_Select、Hover和Disable，...Alt:进度条的操作流程状态 分页器 分页器是用于切换内容页面的复合组件，常规的分页器有上下页操作按钮、分页页码按钮、输入页码手动查找的搜索框，以及分页器的4个状态：1.Normal 2.Hover
集成数据库通用翻页类（负责具体处理逻辑），搭配分页导航控件（负责外观），形成超级牛逼的翻页控件。 集成数据库自动清理类，设定最大记录数后台自动清理早期数据。...集成自定义委托类，支持复选框、文本框、下拉框、日期框、微调框、进度条等。 同时支持Qt4-Qt6，亲测Qt4.6到Qt6.1任意版本，任意系统和编译器。...（三）分页导航控件 可设置页码按钮的个数。 可设置字体大小。 可设置边框圆角角度、大小、颜色。 可设置正常状态背景颜色、文字颜色。 可识别悬停状态背景颜色、文字颜色。...可设置按下状态背景颜色、文字颜色。 可设置选中状态背景颜色、文字颜色。 可设置导航位置居中对齐、左对齐、右对齐。 可设置是否显示提示标签控件。 自动计算总页码数显示隐藏多余按钮。...复选框自动居中而不是左侧，切换选中状态发送对应的信号。 可设置颜色委托，自动根据颜色值绘制背景颜色，自动设置最佳文本颜色。 可设置按钮委托，自动根据值生成多个按钮，按钮按下发送对应的信号。
结果筛选和过滤，针对不同的条件，快速过滤找到符合条件的数据结果 新增记录或批量操作(数据表格展示明细一般可以无此需求) 表格信息展示，包括核心字段展示，记录详情查看、信息修改等操作 表格记录统计，及分页功能...状态字段：状态字段一般用来标识记录的状态变更，不同状态以具有一定含义的不同色系的icon或文案加以区分，可以更方便对比区分 操作列：单行记录的操作按钮，包括查看详情、编辑、删除等更多，通常为了保持表格的宽度...，操作列的操作类型不超过4个，前三个优先展示最常用的操作，其他的在更多按钮中聚合，点击后展开更多操作 批量选择，对于需要批量操作的场景，表格第一列一般为复选框，可以批量全选或取消 权限控制：行记录权限，...要做好数据权限过滤，而对于资产目录、信息共享类的内容，可以展示记录的同时，控制操作权限，即只有编辑权限的人才可以对记录进行编辑、删除等，查看用户对应按钮禁用置灰 导出：对于有下载后二次处理或分析的，可以提供导出功能 分页器...：显示记录条数及翻页功能，有些场景也可以使用滚动下拉加载分页 2.字段说明&自查清单 三、小结 表格虽然是非常简单通用的功能，产品PRD输出环节，照着以上功能需求和交互清单，用户的需求和体验问题基本都可以覆盖了
在数据的界面显示当中，表格数据的展示以及分页是非常常见的处理操作，利用Bootstrap的样式布局，以及JQuery的Ajax数据处理，就能很好实现数据的动态展示和分页处理。...1、列表展示和分页处理 1）数据的列表展示 在很多页面里面，我们一般都需要对数据库记录进行列表展示并进行分页。 ?...2）数据分页处理 我们页面显示的数据一般不是固定的记录，因此分页也是很必要的处理，可以提高性能，也可以提高用户的友好体验，其中的数据分页是采用了Bootstrap的插件Bootstrap Paginator...，设置JSTree的选中状态，界面效果如下所示。...然后在根据需要设置树列表的选中状态，这种不用频繁初始化树，可以有效提高性能和响应体验。
文章目录 1、需求 2、后端 2.1 后端接口 2.2 mybatisplus分页配置 3、前端 3.1 绑定数据与分页条 3.2 实现效果 1、需求 前后端分离项目，将后端返回的JSON格式数据在前端用...(先配置跨域) 这里是条件查询带分页 查询所有医院的设置信息，使用mybatisplus可以少写好多代码。...2.1 后端接口 //3、条件查询带分页 @ApiOperation("条件查询带分页") @PostMapping("findPage/{current}/{limit}")...联系人姓名"/> 状态...}); //刷新页面 this.getList(1) }) }); }, //获取选择复选框的id值
2.表格行可操作（ps：比如编辑，删除，查看详情）3.表格的顶部可操作（ps:展开，排序）4.表格尾部可分页 5.表格可多选（ps：表格带复选框） 多功能的表格组件 安装插件 npm install element-ui...sortablejs -S 在项目中我是使用sortablejs实现拖拽的，以及使用elemnt-ui的分页组件实现分页的功能。...如果需要复选框可通过配置select,将改字段设置为true。通过配置attr来配置属性，当然如果不传也可以，有默认值。那如何获取到每行勾选所对应的值呢？留个疑问，后续我们再讲述。 ?...组件中使用了 \attrs[1]对象属性的集合和\listeners[2]对象事件的集合来实现属性的跨阶级传递，监听事件的传递。...将绑定在 table 组件的属性和事件通过跨阶级传递给递归组件，使得递归组件接收属性和事件。自定义递归组件： ? 有了表头和表格数据就可以实现每行的编码了，就是遍历 table 数据和表头数据.
companyName: '' }, // 复选框选中数据集合...description: '' }, // 复选框选中数据集合...}] } } }) 分页工具条...--分页工具条--> <el-pagination @size-change="handleSizeChange"...) { console.log(this.brand); }, // 分页
Qt 是一个跨平台C++图形界面开发库，利用Qt可以快速开发跨平台窗体应用程序，在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率，本章将重点介绍CheckBox...isChecked() const 返回复选框的当前状态，选中返回 true，否则返回 false。...checkState() const 返回复选框的当前状态，枚举类型 Qt::CheckState。 setTristate(bool) 启用或禁用三态复选框的功能。...isChecked() const 返回复选框的当前状态，选中返回 true，否则返回 false。...setChecked(bool check) 设置复选框的状态，true 表示选中，false 表示未选中。 text() const 返回复选框的文本标签。
引入pagination分页插件...scope.paginationConf.totalItems = response.totalSize; } ); } 在此方法中，采用的是post请求，success方法代表的是调用成功之后执行的操作 分页... 分页所需引用的方法，onchange事件代表的是当值发生改变后调用的方法 scope.paginationConf...], onChange: function(){ scope.reloadfindByPage(); } } 多选，首先在文档中定义一个数组/集合，然后利用对应的$event事件获取到其获取的复选框...,判断是否为选中状态，对其进行不同操作 $scope.selectedIds = []; $scope.getMultiCheckBox = function($event,id){
ids.add(2L); ids.add(5L); ids.add(6L); //第二个参数是个集合对象即可，注意集合对象这里对应的类型虽然是Object，不过要和你数据库对应的类型保持一致...Http请求，执行增加 $http.post("/brand/add.shtml",$scope.entity).success(function(response){ //判断执行状态...update.shtml"; } //执行操作 $http.post(url,$scope.entity).success(function(response){ //判断执行状态...function(){ $http.post("/brand/delete.shtml",$scope.selectids).success(function(response){ //判断删除状态...button ng-click="getPage(1,10)" class="btn btn-default">查询 9.3.2 js 定义一个搜索对象，和搜索条件那里保持一致
现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素； 简单示例 例如，如果你想选中一段的第一行，你可以把它用一个元素包起来，然后使用元素选择器；不过，如果包起来的单词/字符数目长于或者短于父元素的宽度...:any-link 匹配一个链接的:link和:visited状态。 :blank 匹配空输入值的``元素。 :checked 匹配处于选中状态的单选或者复选框。...:disabled 匹配处于关闭状态的用户界面元素 :empty 匹配除了可能存在的空格外，没有子元素的元素。 :enabled 匹配处于开启状态的用户界面元素。...:indeterminate 匹配未定态值的UI元素，通常为复选框。 :in-range 用一个区间匹配元素，当值处于区间之内时匹配。...:right 在分页媒体 (en-US)中，匹配右手边的页。 :root 匹配文档的根元素。 :scope 匹配任何为参考点元素的的元素。
常用功能要有快捷键(方式)的支持（如：分页页面间的快捷切常用组合Ctrl+Tab） 3....状态条的高度以放置五号字为宜，滚动条的宽度比状态条的略窄。 12. 菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。 13. 菜单和状态条中通常使用5号字体。...2):列表 Ctrl-R ，Ctrl-G定位；Ctrl-Tab下一分页窗口或反序浏览同一页面控件；。...界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。 7....公司的系列产品要保持一致的界面风格，如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。 7.多窗口的应用与系统资源 1.
如果设置 false，则在切换分页时，不会出现加载条。...如果设置 false，则在切换分页时，不会出现加载条。...Boolean 是否全选状态（默认：false）。...必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。 true fixed String 固定列。可选值有：left（固定在左）、right（固定在右）。...必须复选框列开启后才有效，如果设置 true，则表示复选框默认全部选中。 true fixed String 固定列。可选值有：left（固定在左）、right（固定在右）。
： 其他输入正确 输入以上数据，点击【确定】按钮 保存录入信息，关闭窗口，回到盘点结果录入页，该资产盘点结果、盘点备注、是否已盘（变为“已盘点”）信息更新，操作栏变为【修改结果】按钮；同时，该资产前的复选框消失...字 其他输入正确 输入以上数据，点击【确定】按钮 保存录入信息，关闭窗口，回到盘点结果录入页，该资产盘点结果、盘点备注、是否已盘（变为“已盘点”）信息更新，操作栏变为【修改结果】按钮；同时，该资产前的复选框消失...： 其他输入正确 输入以上数据，点击【确定】按钮 保存录入信息，关闭窗口，回到盘点结果录入页，该资产盘点结果、盘点备注、是否已盘（变为“已盘点”）信息更新，操作栏变为【修改结果】按钮；同时，该资产前的复选框消失...】按钮有效性验证 资产管理员正确打开资产盘点管理页面 无 点击【盘点状态】按钮 弹出盘点状态下拉框 高 通过 ZCGL-ST-SRS016-137 资产盘点查询 盘点状态下拉框值正确性验证 资产管理员正确打开资产盘点管理页面...无 点击【盘点状态】按钮 显示未开始、进行中、已结束 低 通过 ZCGL-ST-SRS016-138 资产盘点查询 按盘点状态（列表中有数据）进行查询 资产管理员正确打开资产盘点管理页面 盘点状态：列表中有数据
数据库的运维工作中，我喜欢啪啦啪啦的敲一大堆的命令，处理问题的时候，手完全能跟上自己的思路，而明显的感受，周一敲命令的手感就差了很多，隔个双十一过年的，会掉下一大截，所以这手艺活的频度还是要保持。...第五个就是目前的使用其实分页方案是把数据都查出来，在前端来实现分页。和高性能中考虑的分页是完全不同的，千儿八百的服务器可能差别不大，量级一大，这个问题就会逐步成为性能问题。...第六个是资产数据的状态其实是和数据的生命周期联系起来的，有些数据是不需要有修改权限，或者你不能默认创建出一个故障服务器。...还有权限的信息显示是把已有的权限都勾选出来，避免重复勾选，而且设置为不可改变还是更加动态，使用两个复选框来处理。 菜单和权限在显示的时候是不是可以满足层级关系。
important; } 到这里就可以部分数据不显示复选框了，但是全选功能和获取id的功能还是不正常 全选功能 form.on("checkbox(siam_all)", function...this).attr("data-id"); // 如果需要获取其他的值 需要在模板中把值放到属性中 然后这里就可以拿到了 }); 使用done函数禁用 这是网上的做法，但是有瑕疵，全选不可用，并且不可选状态和可选状态的复选框样式很接近...10, 15, 20, 40, 60, 80], limit: 10, page: true, //开启分页...}); } }); //监听表格复选框选择
在联调接口时，可能还会遇到传输 Cookie 的问题，具体可以参见 关于 Angular 跨域请求携带 Cookie 的问题。...选择 UI 库 因为项目比较小，开发之初打算自己写组件，比如分页，但实际情况比较复杂，尤其刚接触 Angular，对于组件交互、异步数据还有点懵，尝试写了一下，仍然有很多问题，所以最终还是选择比较成熟的...对于后台管理系统，常用的组件无外乎弹窗、分页、标签页等。对于更复杂的系统，也可以根据自己的情况选择其他组件更丰富的 UI 库，比如 PrimeNG 等。...组件库主要使用了弹窗及分页，其中 ngx-bootstrap 的弹窗是一个比价优秀的组件，信息输入及提示都会用到。以下是一个自定义 Alert 弹窗，通过 Service 共享组件即可。...然而复选框的 value 值只有 true 或者 false，而 select 多选框的 value 值就是数组。所以 Vue 对复选框的多选操作进行了处理，而 Angular 没有，需要你自己处理。
前言 bootstrap 提供了table表格插件，可以快速帮我们实现分页功能。这样就不用在前端页面上写分页逻辑，只需关注后端给对应数据就行。...bootstrap-table提供两种分页方式，client和server，即客户端和服务端分页； client分页： 后台一次性返回所有数据，前台翻页时不再请求后台（数据量很大的时候会导致查询很慢）。...server分页： 后台根据前台每次翻页时传递的参数，可以结合Paginator分页器查询每个页码对应的数据，每次只返回对应页面的数据 bootstrap-table 下载所需要的包 Bootstrap...columns = [ { checkbox: true, visible: true //是否显示复选框...}); //得到查询的参数 视图 查询结果必须是json格式:{“total”: 2,”rows”: [{},{}]},其中total和rows名称必须保持一致
演示地址：http://haiyongcsdn.gitee.io/realistic-red-switch/ 模拟状态 开关具有2个状态-开启和关闭，但是CSS无法保持这种状态。...由于我们只需要维护2个状态，因此checkbox元素是一个不错的选择。我们可以使用:checkedCSS选择器根据复选框是否选中来应用CSS。...我们将整个内容包装在中，以将整个元素的click事件链接到复选框，然后使用CSS隐藏复选框本身。 <label class="switch
项目开发知识盲区记录 解决ajax请求下，后台页面跳转无效问题 layui数据表格的使用和分页失效的问题解决 layui的数据表格的cols属性设置列的二维数组的[[....]]和thymeleaf的语法重复...layui批量获取复选框选中的值 controller层接收前端数组形式的请求参数 1....table的渲染提供了一个后端接口的参数 然而这个接口要求后端的数据进行格式化的处理，然而这个会和分页功能产生冲突导致分页失效。...layui分页失效问题 layui数据表格分页无法正常显示 ---- layui的数据表格的cols属性设置列的二维数组的[[…]]和thymeleaf的语法重复，因此在使用springboot的模板引擎进行渲染时...第一种方式 页面正常通过Key-Value的形式传值，数组保持原格式，后端使用@RequestParam注解标注接值的入参，注意@RequestParam里的value一定要带上中括号： controller
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
