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

移动后重置angularjs ui-grid中的列顺序

可以通过以下步骤实现:

  1. 首先,确保你已经引入了AngularJS和ui-grid的相关依赖。
  2. 在HTML文件中,创建一个包含ui-grid的div元素,并指定一个唯一的ID,例如:<div id="gridContainer" ui-grid="gridOptions" class="grid"></div>
  3. 在AngularJS的控制器中,定义gridOptions对象,并配置ui-grid的列定义和数据源,例如:$scope.gridOptions = { columnDefs: [ { name: 'column1', displayName: 'Column 1' }, { name: 'column2', displayName: 'Column 2' }, { name: 'column3', displayName: 'Column 3' } ], data: [ { column1: 'Data 1', column2: 'Data 2', column3: 'Data 3' }, { column1: 'Data 4', column2: 'Data 5', column3: 'Data 6' } ] };
  4. 在控制器中,使用ui-grid的api方法来监听列顺序的变化,并将变化保存到本地存储中,例如:$scope.gridOptions.onRegisterApi = function(gridApi) { gridApi.colMovable.on.columnPositionChanged($scope, function(colDef, originalPosition, newPosition) { // 保存列顺序到本地存储 localStorage.setItem('columnOrder', JSON.stringify($scope.gridOptions.columnDefs)); }); };
  5. 在控制器初始化时,检查本地存储是否存在列顺序的设置,并将其应用到gridOptions中,例如:$scope.init = function() { var columnOrder = localStorage.getItem('columnOrder'); if (columnOrder) { $scope.gridOptions.columnDefs = JSON.parse(columnOrder); } }; $scope.init();

通过以上步骤,当用户移动列顺序后,会将新的列顺序保存到本地存储中。下次加载页面时,会自动应用之前保存的列顺序。这样就实现了移动后重置angularjs ui-grid中的列顺序。

关于ui-grid的更多详细信息和使用方法,你可以参考腾讯云的产品介绍链接:ui-grid产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

SQL Server 数据库调整表顺序操作

SQL Server 数据库中表一旦创建,我们不建议擅自调整列顺序,特别是对应应用系统已经上线,因为部分开发人员,不一定在代码中指明了列名。...表是否可以调整列顺序,其实可以自主设置,我们建议在安装后设置为禁止。 那么,如果确实需要调整某一顺序,我们是怎么操作呢? 下面,我们就要演示一下怎么取消这种限制。...当然,通过取消限制演示,相信大家也知道了怎么添加限制了。...您所做更改要求删除并重新创建以下表。您对无法重新创建标进行了更改或者启用了“阻止保存要求重新创建表更改"选项。】...】复选框 Step 4 再次执行调整列顺序操作,修改 OK

4.3K20
  • 分组合并分组字符串如何操作?

    一、前言 前几天在Python最强王者交流群【IF】问了一个Pandas问题,如图所示。...下面是他原始数据: 序号 需求 处理人 1 优化 A 2 优化 B 3 运维 A 4 运维 C 5 需求 B 6 优化 C 7 运维 B 8 运维 C 9 需求 C 10 运维 C 11 需求 B...如果不去重,就不用unique,完美地解决粉丝问题! 后来他自己参考月神文章,拯救pandas计划(17)——对各分类含重复记录字符串列去重拼接,也写出来了,如图所示。...这篇文章主要盘点了一个pandas基础问题,文中针对该问题给出了具体解析和代码实现,帮助粉丝顺利解决了问题。...最后感谢粉丝【IF】提问,感谢【月神】、【瑜亮老师】给出思路和代码解析,感谢【dcpeng】等人参与学习交流。

    3.3K10

    Excel公式练习44: 从多返回唯一且按字母顺序排列列表

    本次练习是:如下图1所示,单元格区域A2:E5包含一系列值和空单元格,其中有重复值,要求从该单元格区域中生成按字母顺序排列不重复值列表,如图1G所示。 ?...TRUE,TRUE,FALSE,TRUE,TRUE;TRUE,FALSE,FALSE,TRUE,TRUE}/{2,9,4,9,4;9,9,9,9,1;1,1,9,2,4;2,9,9,2,4}) 除法运算:...在单元格G1主公式: =IF(ROWS($1:1)>$H$1,"", 如果公式向下拖拉行数超过单元格H1数值6,则返回空值。 3....Range1,""",COUNTIF(Range1,"<"&Arry4)),0)) 实际上,这是提取唯一且按字母顺序排列标准公式构造...唯一不同是,Range1包含一个4行5二维数组,而Arry4是通过简单地将Range1每个元素进行索引而得出,实际上是20行1一维区域。

    4.2K31

    js获取url?参数,修复移动版无法切换到电脑版BUG

    昨天,发布了《完美实现移动主题在 360 网站卫士缓存全开情况下切换》一文,通过 JS 实现了主题在移动端访问时自动切换,最后提到了可以在电脑版和移动 footer 里面加上手动切换链接,实现手动版本切换功能...说干就干,在 oschina 找到如下 2 获取 url 后面参数方法: //获取请求url参数值: /*方法一:参数值没有等于号(“=”)*/         function getUrlRequest...符字串             var theRequest = new Object();             if (url.indexOf("?") !...符字串                 var theRequest = new Object();                 if (url.indexOf("?") !...所以改成了登陆到 PC 版后台链接,若手机主题已存在登陆链接,删除替换即可。 最终,解决了移动版无法切换到电脑版 BUG~!

    5.4K80

    C语言经典100例002-将M行N二维数组字符数据,按顺序依次放到一个字符串

    喜欢同学记得点赞、转发、收藏哦~ 后续C语言经典100例将会以pdf和代码形式发放到公众号 欢迎关注:计算广告生态 即时查收 1 题目 编写函数fun() 函数功能:将M行N二维数组字符数据...,按顺序依次放到一个字符串 例如: 二维数组数据为: W W W W S S S S H H H H 则字符串内容是:WSHWSHWSH [image.png] 2 思路 第一层循环按照数进行...M 3 #define N 4 /** 编写函数fun() 函数功能:将M行N二维数组字符数据,按顺序依次放到一个字符串 例如: 二维数组数据为: W W W W S S S...%c\t", a[i][j]); // printf("%c\t", *(*(a*i)+j)); // 指针表示 } printf("\n"); } printf("按顺序依次.../demo 二维数组中元素: M M M M S S S S H H H H 按顺序依次: MSHMSHMSHMSH -- END -- 喜欢本文同学记得点赞、转发、收藏~ 更多内容,欢迎大家关注我们公众号

    6.1K30

    详细介绍 AngularJS 表单各种特性、用法和最佳实践

    本文将详细介绍 AngularJS 表单各种特性、用法和最佳实践。1. 表单基础知识在 AngularJS ,表单是由一系列表单控件组成。...showField">提交在上述示例,我们定义了一个复选框来控制一个文本输入框显示和隐藏,同时根据该复选框状态来禁用或启用提交按钮。4....表单提交和重置通过 AngularJS,我们可以轻松地处理表单提交和重置操作。表单提交使用 ng-submit 指令可以定义在提交表单时要执行函数。...表单重置使用 ng-click 指令可以定义在按钮点击时重置表单函数。...在上述示例,我们定义了一个提交按钮和一个重置按钮,分别执行了 submitForm() 和 resetForm() 函数来处理表单提交和重置操作。

    21030

    社区网站系统 jsGen

    jsGen基本原理:客户端浏览器发起访问请求,NodeJS服务器先响应由AngularJS编写Web应用,这个应用是由html模板、js和css静态文件组成。...客户端获取到AngularJS应用后,再由AngularJS与后台NodeJS服务器API接口通信,根据用户请求交换数据,这些数据是纯粹json数据包,AngularJS获取到json数据包再编译成相关页面展现给用户...用户帐号系统,关注(follow)用户/粉丝、邮箱验证激活、邮箱重置密码、SHA256加密安全登录、登录失败5次锁定/邮箱解锁、用户标签、用户积分、用户权限等级、用户阅读时间线等功能。...(待完成) 站内短信系统,提供在文章、评论 @用户功能,重要短信发送邮件通知功能等。...说明 jsGen 是为AngularJS中文社区开发网站系统,测试版已上线。

    2.2K50

    Angularjs基础(十二)

    ng-model-options       描述:规定如何更新模型             实例: 在失去焦点时绑定输入框值scope 变量。                 ...、           鼠标点击执行顺序,1.Mousedown 2.Mouseup 3.Click             语法:<element ng-mousedown=...ng-mousemove           描述:规定鼠标指针在指定元素中移动行为。             实例:在鼠标指针在元素上移动时执行表达式。             ...>             定义和用法                 ng-mousemove 指令用于告诉AngularJS 鼠标在HTML 元素上移动时要执行操作。             ...h1>          定义和用法:ng-mouseover 指令告诉AngularJS鼠标移动到指定HTML 元素上时执行操作。

    3.1K100

    【Hybrid开发高级系列】AngularJS(三)——开发实践

    Yeoman将会自动构建你应用、拉取需要依赖并在你工作流创建一些有帮助Grunt任务(GruntTasks)。几分钟,我们就能正式开始啦!...scope.on(' scope.watch(' 1.3.6 依赖注入顺序与方法参数引用属性必须保持一致         如上图就是错误写法,这样会导致构造方法入参类型是错!!!     ...原因分析:         AngularJS中注入依赖,本质上也是根据类名去寻找对应类代码逻辑地址,如果有多个对象注入,在初始化方法,必须是按照注入顺序传递进来,因为JS是无类型,切记切记。...2 参考链接 2.1 AngularJS基础 整理AngularJS一些常用指令 http://www.xker.com/page/e2015/06/198575.html AngularJS移动开发坑汇总...1.html 简介AngularJS$http服务用法 http://www.jb51.net/article/79243.htm AngularJS中使用路由和$location切换视图 http

    24720

    AngularJS】—— 4 表达式

    前面了解了AngularJS基本用法,这里就跟着PDF一起学习下表达式相关内容。   在AngularJS表达式,与js并不完全相同。   ...首先它表达式要放在{{}}才能使用,其次相对于javascript表达式概念,它有以下几点不同:   1 作用域不同 在javascript默认作用于是window,但是在angularJs...2 允许未定义值 在angularjs,如果使用了未定义表达式,也不会出现错误,直接返回空值。   ...scope.name = str; } }   通过reset触发reset方法,重置...name变量内容;   在表达式,引用了未定义test,但是并没有报错,直接默认显示为空;—— {{test}}   最后使用过滤器,将表达式name值转化成大写。

    1.2K50

    前端学习

    && css3 html5新增元素和标签结构 html5新增特性API  css3新特性/动画 CSS 基础样式、规范总结 CSS reset CSS技术交流 bootstrap框架熟悉 html5移动...您可给HTML添加新元素、属性标记,作为AngularJS编译器指令。 AngularJS编译器是完全可扩展,这意味着通过AngularJS您可以在HTML构建您自己HTML标记!...模型数据可能是Javascript对象、数组或基本类型,这都不重要,重要是,他们都属于AngularJS作用域对象。   AngularJS通过作用域来保持数据模型与视图界面UI双向同步。...一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面,反之亦然。   ...前端工程师必备:细数那些好用网站开发工具 前端技能汇总 六、学习顺序 1.html5新元素、标签、标准、常用新特性Api 2.css3使用 3.bootstrap,移动Web、跨浏览器开发

    2.3K10

    用Python标准库turtle画一只老虎,祝您新年虎虎生威,大吉大利!

    去年文章已经详细介绍使用方法了,为了方便,本文将这些方法再一遍,已经知道可以直接下滑跳过此部分。 1....pos(): 返回画笔当前坐标。鼠标移动一段时间可以print()打印此函数获取鼠标位置。 heading(): 返回画笔当前方向。 3....goto(x, y): 移动画笔到指定坐标。 4. 颜色填充 begin_fill(): 开始填充。 fillcolor(color): 设置图形填充颜色。 end_fill(): 结束填充。...我没有花时间去翻官方有没有这样issue,自己写了个补丁函数,重置上一个图形终点(重点:重置是上一个),当填充颜色不符合预期时,打上补丁。...先定一个坐标原点,图形每个部分都根据原点去找位置,这样可以避免图形出现大偏差。 顺序很重要。 有些部分之间先后顺序不能反,主要影响是颜色填充,这点也是图形分析时要注意,分析好图层顺序

    51710

    如何使用 AngularJS 构建功能丰富表格?

    在 Web 开发,表格是一种常见数据展示方式。AngularJS 提供了强大指令和服务,使得表格创建和操作变得更加简单、高效。...本文将详细介绍 AngularJS 表格相关知识,并演示如何使用 AngularJS 构建功能丰富表格。先决条件在开始之前,请确保您已经正确安装并配置了 AngularJS 环境。...如果尚未安装,请根据AngularJS官方文档指引执行安装步骤。创建基本表格在 AngularJS ,我们可以使用 ng-repeat 指令迭代一个数组,以动态生成表格行。...我们使用 ng-repeat 指令迭代名为 columns 数组,生成表头每一。...通过遍历 columns 数组,我们可以动态确定表格数和列名。排序和过滤表格数据AngularJS 还提供了排序和过滤表格数据功能。

    27420
    领券