sortable

　　最近要玩OpenReports，但在网上找了一圈，能用的资料少得可怜，所以把最近使用下来，积累的一些技巧记录下来（有部分整合了网上的资源）。 备注：以下操作说明基于已做汉化的项目（汉化方案请参考：http://www.cnblogs.com/shindo/articles/4958767.html） 1 简介 　　OpenReports 是一个灵活、强大和易于使用的开源web 报表制作工具。OpenReports 提供的基于浏览器，参数驱动，动态生成报表和灵活的报表预定的能力。OpenReports支持各种各样的开放来源报表引擎，包括JasperReports、JFreeReport、JXLS和Eclipse BIRT，为制作各种各样的报表需求提供支持。 　　OpenReports也支持查询报表和图形报表，容易创造基于SQL语句的报表而不必要求报表已预定义。 　　·OpenReports提供一个基于web的报表生成和管理界面，具有以下特点： 　　·支持各种各样的导出格式，包括PDF、HTML、CSV、XLS、RTF和图象。 　　·通过web界面进行用户、分类、报表、图、参数和数据来源进行管理。 　　·灵活的安排能力包括每日，每周和月度选择和多重接收。 　　·OpenReports的报表参数可以支持：日期、文本、表单、查询和布尔参数。 　　·对报告

前言 在web页面上经常遇到的鼠标事件有：鼠标悬停操作，鼠标右键，鼠标长按，拖拽等操作 trigger() trigger 方法用于在 DOM 元素上触发事件 语法使用示例 .trigger(eventName) .trigger(eventName, position) .trigger(eventName, options) .trigger(eventName, x, y) .trigger(eventName, position, options) .trigger(eventName, x, y, options) 正确用法 cy.get('a').trigger('mousedown') // 触发 mousedown 事件 不正确的用法 cy.trigger('touchstart') // 错误，不能直接用在cy. cy.location().trigger('mouseleave') // 错误, 'location' 不生成 DOM 元素 要求：.trigger() 需要链接到产生 DOM 元素的命令。 参数说明 eventName（字符串） event 在DOM元素上要触发的的名称。 position（字符串） 应该触发事件的位置。该center位置是默认位置。有效的位置topLeft，top，topRight，left，center，right

最近工作中用到了jQuery UI中排序和拖拽功能，花了大概一天的时间，搞清楚了大概的参数配置，以及遇到的一些问题，总结如下。 sortable 简单的配置如下： $('#subs-box').sortable({ axis: 'y', cursor: 'ns-resize', placeholder: "ui-state-highlight", // 排序过程中占位符的class样式设置 forcePlaceholderSize: true, // 强迫占位符有一个尺寸大小。 handle:'.sort-at', // 在对象内指定的元素上开始拖动，而不是整个元素都可以拖动 distance: 10, opacity: 0.8, containment：'parent', // 元素可以拖动排序的范围 // helper: 'clone', // 是否clone一个元素进行拖动 items: '.subject', // 指定哪些元素可以排序 stop: function (e, ui) { // 排序后元素的顺序（前提每个元素都需要有id属性） let newSubArr = $("#subs-box").sortable('toArray'); console.log(newSubArr); }, }).disableSelection(); // 拖动时禁止选中元素

Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大） 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大） 官方Demo： http://rubaxa.github.io/Sortable/ 安装步骤： npm install sortablejs --save 在.vue中的js部分（需要用到sorttable的vue文件中）引入 也可以 在main.js中引入注册到Vue的根实例中 import Sortable from 'sortablejs' HTML 部分 <el-table :data="tableData" border width ="100%" row -key="id" align ="left" v -show="showDictItem"> <el-table-column width="50px"> <template slot-scope="scope"> <el-button type='text' v-show="scope.row.defaultValue === 1">默认</el-button> </template> </el-table-column> <el-table-

Vue 动态表格+插入自定义表头 <!-- 表格 --> <el- table :data ="templateData" style ="width: 100%;" stripe ref ="templateTable" :empty -text="$t('basic.noData')" @filter-change="filterTable" @sort -change="sortData"> <template v- for ="(item, index) in tableHeaders"> <el-table-column v- if ='item.prop == "per"' :key='index' :label='item.label' :prop='item.prop' :width="item.width" sortable> <template slot-scope="scope"> <el-progress class="NewCMMonitorPro" :text-inside="true" :percentage="70" :width="scope.row.width"></el-progress> </template> </el-table-column> <el-table-column v- else - if ='item.prop ==

abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一） abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) abp(net core)+easyui+efcore实现仓储管理系统——领域层创建实体(三) abp(net core)+easyui+efcore实现仓储管理系统——定义仓储并实现 (四) abp(net core)+easyui+efcore实现仓储管理系统——创建应用服务（五） abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之控制器（六） abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图（七） abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之增删改视图（八） abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之菜单与测试（九） abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十一) abp(net core)+easyui+efcore实现仓储管理系统—

abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一） abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) abp(net core)+easyui+efcore实现仓储管理系统——领域层创建实体(三) abp(net core)+easyui+efcore实现仓储管理系统——定义仓储并实现 (四) abp(net core)+easyui+efcore实现仓储管理系统——创建应用服务（五） abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之控制器（六） abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之列表视图（七） abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之增删改视图（八） abp(net core)+easyui+efcore实现仓储管理系统——展现层实现增删改查之菜单与测试（九） abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十一) abp(net core)+easyui+efcore实现仓储管理系统—

一、什么是Bootstrap-table？ 　　 在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-*属性标识设置，也可以使用Javascript方式进行设置，非常方便。本篇随笔介绍bootstrap-table插件在我实际项目中的应用情况，总结相关使用中碰到的问题处理经验。 二、怎么使用 Bootstrap-table？ Bootstrap-Table显示数据到表格的方式有两种，一种是客户端（client）模式，一种是服务器（server）模式。 　　 客户端模式 ：指的是在服务器中把要显示到表格的数据一次性加载出来，然后转换成JSON格式传到要显示的界面中，客户端模式较为简单，它是把数据一次性加载出来放到界面上，然后根据你设置的每页记录数，自动生成分页。当点击第二页时，会自动加载出数据

1、BootstrapTable的列排序怎么搞。 先搞一个table，使用ajax将数据查询出来，然后可以在所有列都加上排序。满足自己的需求。 data-sortable= " true "， 此属性加到列上面，可以显示出上下排序的箭头。 1 <div style= " float: left; width: 100%; " > 2 <div class = " clearfix " ></div> 3 <table id= " dataTable " style= " font-size: 12px; " data-toolbar= " #timeSearch " 4 data-toggle= " table " 5 data-locale= " zh-CN " 6 data-ajax= " ajaxRequest " 7 data-side-pagination= " server " 8 data-striped= " true " 9 data-click-to- select = " true " 10 data-sort-name= " id " 11 data-sort-order= " desc " 12 data-row-style= " rowStyle " 13 data-pagination= " true " data-pagination-first

产品经理：那个table排序能不能点击后弹个选项选择正序倒序不排序？ -- 那个是bootstrapTable的插件！不支持！改不了！！ 注意：数据上假的，效果看http请求参数进行脑补 这是bootstrap能干的列排序： 客户想要的列排序： 点击再选择升序、降序、不排序，这种反人性的设计。。。。（bootstrapTable没分成上下俩箭头点击排序也很反人性，想倒序还要点击两次） 百度一下，网上并没有这种需求和方案，bootstrapTable也没有哪里可以拦截排序，去自定义创建dom再触发排序的api 所以，从bootstrapTable.js下手吧！ 先了解下bootstrapTable是如何做列排序的 1、在initHeader函数里进行循环colums的时候通过判断options.sortable和column.sortable进行class标记是否排序字段 2、监听th点击事件，调用onSort函数 3、onSort排序事件（获取对应排序字段及排序方式） 改造！！！ 1、改dom （可排序列添加一个dropdown） 2、改事件监听（干掉原有的监听，添加新的事件监听） 3、复制一份onSort修改获取排序字段及排序方式的逻辑 4、css配合让dropdown正常显示（不该这么写th，，） 改造到此结束，至于有什么bug，也很难预料到。不便去深究