layui 的表格组件目前只支持单列排序,在实际应用中并不能很好的支撑我们的业务需求.今天一时手痒,决定改造一番以支持多重排序. 实现思路也比较简单,只需要用一个数组来存放所有排序的列,再把这个数组传到后端(后端排序)进行排序即可.沿用一般的使用习惯,按住 shift 键点击表头可增加排序列,按住 ctrl 键点击表头可减少排序列.话不多说,先上最终效果图: 1. 定义排序列数组 我当前用的是 2.5.6 版本,源码之前为适应业务需求也做过相应修改,所以下文说到的行数只是个大概数. 为兼容之前单

问题描述: 在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回调 原因: done回调只有在render和reload的时候执行 解决办法: 在生成完表格之后,监听排序事件,在排序事件里面执行reload方法,重新执行done回调,并且初始化排序 例子: html代码 <div id="tableTest" lay-filter="test"></div&

有时,我们需要设置jqgrid表格按某个列排序,或则按多个列组合排序.如何实现? 1)设置可以排序的列  sortable: true 2)设置 multiSort: true 启用组合排序 $("#jqGrid").jqGrid({ ... colModel: [ { label: '<a href="HtmlPage1.html" title="测试标题">OrderID</a>', name: 'OrderID',

日期 formatter:"date",formatoptions: {srcformat:'Y-m-d H:i:s',newformat:'Y-m-d'} value {name:'', index:'', width:50, formatter:'select', formatoptions:{value:{ '-1':'已取消',0:'作废', 1:'已提交', 2:'已确认', 3:'等待收货', 4:'已收货'}}, edittype:'select', editoption

如果表头过长,会出现超出显示三个省略号,然后把排序图标挤出去,看不到了, 效果如下 解决办法就是给图标加定位,过长的时候加上 .show-sort{ position: absolute; right: 7px; top: 5px; } $('.layui-table-header tr th').each(function(i,ths){ $(this).find('span:first').attr('title',$(this).find('span:first').text()); //

最近项目使用layui较为频繁,遇到了一个麻烦的问题,网上搜索也没有看到同类型的问题,故此记下来. 需求是点击上图右侧表格中某一个单元格,会触发点击事件如下代码: $("table>tbody>tr>td").click(function(){ chickstr=$(this).attr("data-field"); if(typeof(chickstr)=='string'){ if(chickstr.indexOf("indiCode

1. 手动往grid中添加数据 $("#orgGridId").jqGrid('addRowData',mydata[i].id,mydata[i]); mydata[i].id:添加这列的主键id mydata[i]:json格式的数据, 例{id:"e",name:"2007-09-      01",phone:"test3",parseMobile:"note3",orgName:"400

下表列出了jqGrid中的预定义格式化类型 所有预定义类型和编辑模式兼容,就是说数字,链接和email等需要转换,才能使他们被正确编辑 类型 选项(默认值参考语言选项) 描述 integer thousandsSeparator,defaulValue thousandsSeparator:指定千位分隔符号 defaultValue :指定数据为空时默认显示的值 number decimalSeparator,thousandsSeparator,decimalPlaces,defaulValu

背景 今天在做系统的功能时,当时有这么个需求:在添加了一行数据时,原本的排序的自动就不能再排序,也就是排序失效. 1. 使用onSortCol事件禁止排序列 当时使用了初始化时,使用onSortCol事件在初始化的时候,如果发现了添加行的标记为true的情况,就返回“stop”(返回stop之后列排序就失效了). 然后出现了一个问题,排序功能确实是被禁止掉了,但是排序的上下箭头还是依然顽强的工作,此种方法带了操作上的困扰. 2. 单独禁止掉指定的方法 在网上搜索了一阵之后,jqgrid确实提供了

接上篇文章:jqgrid 将列头设置为超链接或按钮 如果在列头设置了超链接或按钮,在点击超链接或按钮时会触发列的排序事件. 原由:点击超链接/按钮会触发排序的冒泡事件 解决方法:点击超链接/按钮时,阻止冒泡 $("#jqGrid").jqGrid({ gridComplete: function () { $("#jqGrid .ui-row-ltr:first").focus();//加载完数据滚动条置顶 //终止表列头事件冒泡 $.each(document.g

实现方案一客户端实现排序: jqGrid属性 loadonce:true时,所有数据加载在客户端,点击列标题由jqGrid在客户端自动排序,不再从服务器取值. 参考文件:ccMxCxTjCc.js js设定: jqGrid的设定:colModel: [{.....name: ‘zykj‘,sortable: true,},......}],......loadonce:true, //一次加载全部数据到客户端,由客户端进行排序.sortable: true,sortname: ‘zykj‘, /

jqgrid 排序: 1.前台和后台交互依靠的是index属性,index属性没有设置情况下获取name属性 2.如下状态是经过处理显示的中文,name属性为StatusStr,没有index属性的情况下,排序会失败,因为sql查询数据库时查询字段没有StatusStr字段 但如果加上index属性,并设置为index:'Status',排序成功,因为sql查询数据库时查询字段中有Status字段

jqGrid中对列表cell数次那个格式话设置主要通过colModel中formatter,formatoptions来设置. 基本用法: jQuery("#jqGrid_id").jqGrid({ ... colModel: [ ... {name:'price', index:'price',  formatter:'integer', formatoptions:{thousandsSeparator: ','}}, ... ] ... }); formatter主要是设置格式化

发现 jqGrid TreeGrid 加载的数据必须要排序 给了两种平滑数据模式尽然不内部递归 所以改了下源码加了个数据二次过滤器扩展 数据本该是这样的 结果没排序成这样了 (而且还得是从根节点到子节点整体排序) 1. loadFilters: 数据过滤器扩展 (顺带把ParentId为非字符串类型导致初始化后没闭合bug解决了)  $.extend($.jgrid.defaults, { loadFilter: function (d) { function compare(name, min

后台常用功能之排序!!! 一次只能排一个序!!! 基本样式 <tr> <th>序号<span class="layui-table-sort layui-inline" id="id_sort" lay-sort="{$id_sort}"><i class="layui-edge layui-table-sort-asc" title="升序"></i&

实现效果如下图所示: 实现代码: css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: ; } .pic-more { width:%; left; margin: 10px 0px 0px 0px;} .pic-more li { width:90px; float: left; margin-right: 5px;} .pic-more li .layui-input { display: initial;

公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width:100%; left; margin: 10px 0px 0px 0px;} .pic-more li { width:90px; float: left; margin-right: 5px;} .pic-more li .layui-input { display: initial; } .pic-mor

公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width:100%; left; margin: 10px 0px 0px 0px;} .pic-more li { width:90px; float: left; margin-right: 5px;} .pic-more li .layui-input { display: initial; } .pic-mor

之前的项目也曾用过JgGrid对它的基本功能也是略有了解,网上有个国外的开源的项目,但是不适合个人的风格,所以花了3天空余的时间封装了下JqGrid,也算是参加开发工作10个月以来写的第一个比较完整的小例子,高手们就直接飘过不用看了,但是由于时间短,还有很多的不足,需要后期再完善. 整体思路就是一个配置类,同时兼容了链式编程的风格,所有的动作接口都以Set开头,便于识别.记录下来以后做个人的使用手册. 源码地址:https://github.com/halower/JqGridForMvc/ 推

目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.         jqGrid和AJAX 5.         GridSettings 6.         GridModelBinder 7.         LinqExtensions 8.         数据实体类和LINQ 9.         在MVC中集成jqGrid表格插件 介绍 “MVC网站教程”系列的目的是教你如何使用 ASP.NET MVC 创建一个基本的.可扩展的