sortable

前言 上次写了一个 可拖动列表的插件 ，但除了这个特点没什么优点了，接下写的是我们常用的Bootstrap-table表格插件 正文 官网： https://bootstrap-table.com/ 有两个翻译API的网址： https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1 https://blog.csdn.net/mrczr/article/details/64441265 在使用时需要引入如下几个文件： bootstrap.min.css bootstrap-table.css jquery.js bootstrap.js bootstrap-table.js bootstrap-table-zh-CN.js（中文插件） 客户端分页例如下： // 首先销毁表格 $('#fwfx_tb').bootstrapTable('destroy' ); // 初始化表格,动态从服务器加载数据 $('#fwfx_tb' ).bootstrapTable({ pagination: true , // 启动分页 striped: true , // 设置为 true 会有隔行变色效果 cache: false , // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（

官方例子 　　官方提示： 　　　　设置 layout ，表示需要显示的内容，用逗号分隔，布局元素会依次显示。 prev 表示上一页， next 为下一页， pager 表示页码列表，除此以外还提供了 jumper 和 total ， size 和特殊的布局符号 -> ， -> 后的元素会靠右显示， jumper 表示跳页元素， total 表示显示页码总数， size 用于设置每页显示的页码数量。 　　 < div class ="block" > < span class ="demonstration" > 页数较少时的效果 </ span > < el-pagination layout ="prev, pager, next" :total ="50" > </ el-pagination > </ div > < div class ="block" > < span class ="demonstration" > 大于 7 页时的效果 </ span > < el-pagination layout ="prev, pager, next" :total ="1000" > </ el-pagination > </ div > 效果截图如下 我自己的项目中用到了el-table 索性完全贴出来了： 先贴代码 < template > < div class =

　　这篇文章是因为，我们在做的后台项目，里面有大量的表格统计，这个不可能自己手写，所以其中的表格使用的是jqgrid。 　　这个插件其实使用起来还是不错的，里面有很多的功能很赞。这篇博客就是自己的的一个记录，也是对以后项目的一个参考。因为有一些代码总是记不住。 首先就是引入这个插件所需要的js和css了，这个相信大家都不陌生，这个插件是基于jq的所以之前要引入jq，这个不详细的赘述了。然后就是他的基本结构，很简单，就是一个两个标签，一个是表格的内容，一个是翻页功能。 1 < div class ="jqGrid_wrapper" > 2 < table id ="table_list_1" ></ table > 3 < div id ="pager_list_1" ></ div > 4 </ div > table_list_1为这个表格的主要显示内容，而pager_list_1是显示翻页的地方，当然了， 如果你没有翻页的话，这个是可以不要的。 然后是比较重要的一部分了，我这里直接粘贴代码过来，然后在做解释。 1 $("#table_list_1" ).jqGrid({ 2 url:'__URL__/data_search' , 3 postData:{}, 4 datatype: "json" , 5 mtype: 'POST' , 6 height: 450 , 7

一、什么是Bootstrap-table？ 　　在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-*属性标识设置，也可以使用Javascript方式进行设置，非常方便。本篇随笔介绍bootstrap-table插件在我实际项目中的应用情况，总结相关使用中碰到的问题处理经验。 二、怎么使用Bootstrap-table？ 在GitHub上Bootstrap-table的源码地址是： https://github.com/wenzhixin/bootstrap-table Bootstrap-table的文档地址： http://bootstrap-table.wenzhixin.net.cn/ Bootstrap-table的各种样例： https://github.com/wenzhixin/bootstrap

ylbtech-JavaScript-Tool：jqgrid jqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。 1. 返回顶部 2. 返回顶部 3. 返回顶部 4. 返回顶部 1、 jqGrid提供了大量的选项设置，开发者可以通过设置选项对应值来控制jqGrid，比如表格的宽度、高度、数据类型以及列名称等等都是通过选项设置来完成的。jqGrid的选项一般是名称：值（name:value）的形式，也可以是对象(object)及数组（array）的形式配置。 jqGrid选项(Option) 调用jqGrid只需要执行以下代码: jQuery( "#grid_id").jqGrid(options); options即jqGrid的选项设置，请参照以下表格。 属性 类型 描述 默认值 ajaxGridOptions object 此项用于设置当表格设置获得数据时，ajax的全局属性，注意此项可能覆盖所有当前的ajax设置（包括error, complete和beforeSend 事件）。 empty ajaxSelectOptions object 此项用于设置在editoptions或searchoptions对象中通过dataUrl选择元素时， ajax的全局属性。 empty altclass string 交替行的类。

treegird 表格 function gridList() { function gridList() { $.jgrid.defaults.styleUI = "Bootstrap"; var $gridList = $("#gridList"); $gridList.jqGrid({ treeGrid: true,//启用树型Grid功能 shrinkToFit: true, //自适应宽度 treeGridModel: "adjacency",//表示返回数据的读取类型，分为两种：nested和adjacency,默认值：nested ExpandColumn: "so_managerid",//树型结构在哪列显示 url: "/SystemModule/Sys_Organize/GetTreeGridJson",//要访问的后台地址 height: $('body').height() - FullHeight - 155, datatype: "json", autowidth: true, rownumbers: true, colNames: ['主键', '名称', '负责人'],//, '电话', '备注' colModel: [ { name: "so_id",hidden:true, key: true }, { name: 'so_fullname',

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实现仓储管理系统—

　　vue +element ，el-table实现行和列拖拽排序 　　element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。 　实现步骤： 安装Sortable.js npm install sortablejs --save 在页面中引入： import Sortable from ‘sortablejs’ 　　注意：需要注意的是element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。 但是不可用index，因为拖拽后index会变，会有问题。 <template> <div > <el-table :data="tableData" row-key="id"> <el-table-column v- for ="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label"> </el-table-column> </el-table> </div> </template> <script> import Sortable from 'sortablejs' ; export default { data () { return { col:[{label:

< template > < div class ="hello" > < div v-for ="(list, index) in merge" :key ="index" class ="box" :id ="`box-${index}`" > < h1 > {{list.tittle}} </ h1 > < ul :id ="`id-${index}`" v-for ="(item, indexItem) in list.list" :key ="indexItem" > < li > {{item.name}} </ li > </ ul > </ div > </ div > </ template > < script > import Sortable from ' sortablejs ' ; export default { name: ' HelloWorld ' , data() { return { // state 里面的name分别对应的是列表里面的标题 // state里面的1 2 3和list里面的 1 2 3 的关系是：类别归属关系 // 标题1 下面列表对应的分别是 列表1，列表2，列表3 state: { 1 : " 标题1 " , 2 : " 标题2 " , 3 : " 标题3 " , 4 : " 标题4 " , 5 : " 标题5 " },