ng-grid 中的默认 headerCell 模板

2024-04-04

考虑以下 angularJs 代码片段:

var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{\'cursor\': col.cursor}" ng-class="{ \'ngSorted\': !noSortVisible }">' +
                           '<div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}} <img src="PLUS-ICON.png" /></div>' +
                           '<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>' +
                           '<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>' +
                           '<div class="ngSortPriority">{{col.sortPriority}}</div>' +
                           '<div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div>' +
                           '</div>' +
                           '<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';
$scope.gridOptions = {
    data: self.myData,
    columnDefs: [
        { field: 'firstField', displayName: 'First Column', headerCellTemplate: myHeaderCellTemplate },
        { field: 'secondField', displayName: 'Second Column', headerCellTemplate: myHeaderCellTemplate },
        { field: 'lastField', displayName: 'Last Column', headerCellTemplate: myHeaderCellTemplate }
    ]
};

我正在尝试使用 ng-grid 在浏览器中显示 Excel。我需要一个适用于所有字段的 headerCellTemplate。由于这些字段来自 Excel,因此它们可以是随机的、动态的和任意数字。

如何为所有字段设置默认 headerCellTemplate,这样我就不必在columnDefsgridOptions 部分? (由于字段不受控制)

附:参考这个问题 https://stackoverflow.com/questions/30167130/add-directive-to-elements-produced-by-ng-grid也是我问的。这就是我不能在行上使用模板的原因,因为我希望字段可以单独拖动。


在Java(后端)中做了类似的事情:

public static String generateHeaderCellTemplate(List<String> excelFields) {

        String headerCellTemplate = "{ \"data\": \"myData\", \"columnDefs\": [";
        for (int i = 0; i < excelFields.size(); i++) {
            String field = excelFields.get(i);
            if (i != 0) {
                headerCellTemplate += ",";
            }
            headerCellTemplate += ("{ \"field\": \"" + field);
            headerCellTemplate += ("\", \"width\":80," + " \"headerCellTemplate\":" + "\"myHeaderCellTemplate\"}");
        }
        headerCellTemplate += "]}";
        return headerCellTemplate;
    }

控制器:

@RequestMapping(value= "/myHeaderCellTemplate", method= RequestMethod.GET)
    public @ResponseBody String headerTemplate() {
        return "<div class=\"ngHeaderSortColumn {{col.headerClass}}\" ng-style=\"{cursor: col.cursor}\" ng-class=\"{ ngSorted: !noSortVisible }\">"+
                "<div class=\"ngHeaderText item\" id=\"{{col.displayName}}\" draggable value=\"{{col.displayName}}\">{{col.displayName}}</div>"+
                "<div class=\"ngSortButtonDown\" ng-show=\"col.showSortButtonDown()\"></div>"+

        "<div class=\"ngSortButtonUp\" ng-show=\"col.showSortButtonUp()\"></div>"+
        "<div class=\"ngSortPriority\">{{col.sortPriority}}</div>"+
        "</div>"+
 "<div ng-show=\"col.resizable\" class=\"ngHeaderGrip\" ng-click=\"col.gripClick($event)\" ng-mousedown=\"col.gripOnMouseDown($event)\"></div>";
    }

App.js:

    $scope.myData = excelAsJson.excelData;
    $scope.colDefs = columnDefsJson.columnDefs;
    $scope.gridOptions = { data: 'myData', columnDefs: 'colDefs'};

where $scope.colDefs包含输出generateHeaderCellTemplate() List<String> excelFields所有列名都分组在一起

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ng-grid 中的默认 headerCell 模板 的相关文章

  • 如何理解 Angular JS 中的控制台错误消息?有什么工具吗?

    我是 Angular JS 的新手 我的第一个问题是如何理解 Angular JS 中控制台的错误消息 我编写了这段用于匹配密码的代码片段 它在控制台上抛出错误 但它工作正常 它是有线的 我无法从这些控制台消息中理解任何内容 谁能指出我为什
  • 如何使用键盘和鼠标控制相机 - Three.js

    我在 WEB GL 中有一个带有 Three js 的 3D 环境 并且我曾经使用 Orbitcontrols js http codepen io nireno pen cAoGI http codepen io nireno pen c
  • Ext JS - 如何滚动到文本区域的底部

    这是我下面的代码 如何滚动到文本区域的底部 它一定是类似的东西 Ext getCmp output setScrollPosition Ext getCmp output getScrollHeight 这是我的文本区域代码 var myW
  • 限制文本区域中每行的字符数

    我整个周末都在寻找解决这个难题的方法 但尚未找到一个可以正常工作的解决方案 我想要实现的是限制文本区域中每行的字符数 不是相同地限制它们 而是我选择的每行不同的字符数 例如 我只想在我的文本区域中包含 4 行 第 1 2 和 3 行将限制为
  • 如何将中间件绑定到socket.io中的事件

    现在您可以将中间件绑定到io use middleware 但这仅在建立套接字连接时触发 有没有办法在将其传递给事件句柄之前拦截它 就像在expressjs中一样 换句话说 In 快递 js你可以做 app get middleware1
  • 为什么 jQuery 点击事件会多次触发

    我这里有这个示例代码http jsfiddle net DBBUL 10 http jsfiddle net DBBUL 10 document ready function creategene click function confir
  • 计算Javascript中两次点击之间的时间

    我想用 javascript 计算属性的两次点击之间的时间 但我不知道如何 例如 a href click here a 如果用户单击多次 假设 5 秒内 我想显示警报 如果有帮助的话我正在使用 jQuery 我对 javascript 不
  • 何时不使用承诺[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在阅读了数十篇关于 es6 Promise 有多伟大以及为什么我们应该实现它们的文章之后 我有这样的感觉 ALL我的 不平凡的 JavaScri
  • 在 MVC Razor 中的 C# 和 Javascript 之间共享常量

    我想在服务器上的 C 和客户端上的 Javascript 中都使用字符串常量 我将常量封装在 C 类中 namespace MyModel public static class Constants public const string
  • 保存/导出Chrome的JavaScript控制台输入历史记录

    无论如何 我可以保存或导出 JavaScript 控制台的历史记录吗 input 控制台历史记录 在 Google Chrome 中 我不想保存输出或错误 因此将鼠标悬停在控制台框上 右键单击并选择Save as 不是解决方案 我不想每次都
  • 如何记录返回的事件发射器

    如何记录所发出的事件stream返回于MyFunc 与 JSDoc MyFunc description param Object opts description return Stream description function My
  • 使react-leaflet能够离线使用

    我一直在使用反应传单 https github com PaulLeCam react leaflet图书馆 到目前为止运作良好 现在我希望网站预加载尽可能多的图块 以便网络应用程序 也是 PWA 可以在没有互联网的情况下使用 我找到了一些
  • Aptana Studio 3 上的预览选项卡在哪里?

    我在 Windows PC 上使用 Aptana Studio 2 并有一个选项卡用于在 IE 上预览页面 另一个选项卡用于在 Firefox 上预览 但我切换到了 Aptana 3 我不知道是没有预览还是我没有找到它 是的 我在 stac
  • KeyboardEvent.keyCode 已弃用。这在实践中意味着什么?

    根据 MDN 我们绝对应该not正在使用 keyCode财产 它已被弃用 https developer mozilla org en US docs Web API KeyboardEvent keyCode https develope
  • 用数组反向查找对象

    假设我有一个这样的对象 resourceMap a 0 1 2 3 4 5 6 7 8 9 10 b 11 12 c 21 23 d 54 55 56 57 510 确定是否的最佳方法是什么resourceId 21将会 c 我们不知道钥匙
  • 使用 jquery 将字符串数组转换为整数

    我正在尝试将 jquery 中的字符串数组转换为整数数组 这是我的尝试 var cdata data values split each cdata function i l l parseInt l 我认为在这种情况下你不需要使用 Jqu
  • 使水平滚动条始终可见,即使底部不在视图中

    我将用一个片段来开始这个问题 该片段几乎显示了我想要完成的任务 wrapper overflow hidden display flex sidebar min width 200px background 333 color FFF co
  • 如何在网页上实现文件上传进度条?

    当用户将文件上传到我的网络应用程序时 我想显示比动画 gif 更有意义的内容 我还有哪些可能性 编辑 我正在使用 Net 但我不介意是否有人向我展示与平台无关的版本 如果您对这一切在客户端通常如何工作感兴趣 就是这样 所有解决方案都通过 J
  • 如何在apache POI中读取excel文件的准确单元格内容

    当我读取单元格的内容时 例如如果它是日期格式 它会转换为另一个值 例如 12 31 2099 gt 46052 和 50 00 gt 50 和 50 00 gt 0 5 但我想要的是获取每个单元格的确切字符串值 我的代码是这样的 cell
  • Bootstrap 3 / 显示模式不适用于 javascript 方式

    我用Modal http getbootstrap com javascript modalsBootstrap 3 0 的功能 我有这个代码 a href myNestedContent Open the modal containing

随机推荐

  • 选择未聚合的变量,功能上依赖于 GROUPing 变量

    背景 我正在一个非常受限的 T SQL 环境中工作 其中只能定义一个对象的 主体 VIEW 大概是 in CREATE VIEW My View AS 在引擎盖下 这是我的 VERSION https learn microsoft com
  • 如何获取多选框的所有选定值?

    我有一个
  • 从列表 PySpark 的列表中创建单行数据框

    我有一个这样的数据data 1 1 1 2 1 3 1 4 1 5 1 6 我想创建一个 PySpark 数据框 我已经使用了 dataframe SQLContext createDataFrame data features 但我总是得
  • 共享主机上的 403 禁止 Laravel

    我有一个共享主机 我正在尝试让我的 laravel 项目在其上运行 我正在使用 voyager 进行管理面板 我将我的应用程序公共文件夹放在 public html 中 并将项目的其余部分放在 public html 的同一级别上 所以它看
  • 从代理服务器后面调用 Web 服务

    我需要在将使用 Web 服务 XML SOAP 服务 的应用程序 C 中添加功能 现在 该应用程序可以 并且大部分 在具有代理服务器的企业环境中使用 我了解 SOAP 服务使用 HTTP 协议 因此应该使用端口 80 该端口通常保持打开状态
  • 如何在这个线性模型中强制删除截距或等效项?

    考虑下表 DB lt data frame Y rnorm 6 X1 c T T F T F F X2 c T F T F T T Y X1 X2 1 1 8376852 TRUE TRUE 2 2 1173739 TRUE FALSE 3
  • Laravel Model->save() 返回 false 但没有错误

    通常当我打电话时Model gt save 它成功地在数据库中创建了新记录 我正在尝试调试没有发生任何事情的情况Model gt save 返回假 我怎样才能知道发生了什么 user new User user gt fields exam
  • Confluence Schema 注册表持久化

    我希望即使服务器重新启动也能够保留具有固定 id 的模式 是否可以将架构保留在架构注册表中 以便在服务器崩溃后使它们具有相同的 id 否则 当模式注册服务器启动时 是否可以对具有固定 id 的模式进行硬编码 这就是模式注册的目的 模式有一个
  • Whatsapp消息自动回复方法

    我在play store上看到很少有应用程序支持WhatsApp的自动回复 我在网上搜索了方法 但我找到的只是这段代码 Uri uri Uri parse smsto 99 Intent i new Intent Intent ACTION
  • Jquery 延迟加载回调

    我目前正在使用Jquery 延迟加载 http www appelsiini net projects lazyload我想知道当我的容器中的所有图像结束加载时 当延迟加载发挥了所有魔力时 是否有一种方法可以进行回调 原因是我正在使用jSc
  • 如何将虚拟机组合到 Aurelia 验证渲染器中的视图中

    我正在尝试使用 aurelia validation 插件对表单执行验证 我正在创建一个自定义验证渲染器 它将更改输入框的颜色并在框旁边放置一个图标 单击或悬停该图标时 会出现一条弹出消息 其中显示实际的错误消息 目前 我正在渲染器中手动渲
  • 在 django 中处理动态 MultipleChoiceField

    到目前为止我看到的所有答案都让我感到困惑 我制作了一个根据传入的参数以及数据库中存储的问题动态构建的表单 这一切都工作正常 注意 它不是一个 ModelForm 只是一个 Form 现在我正在尝试保存用户的响应 我如何迭代他们提交的数据以便
  • SwiftUI:仅在 iOS 14+ 上使用“accessibilityIdentifier”

    给出以下代码 struct CopyButtonStyle ButtonStyle init func makeBody configuration Configuration gt some View let copyIconSize C
  • SQL 比较每小时总订单并删除当前库存可能吗?

    不确定是否可以单独使用 sql 来完成此操作 但我宁愿询问然后向流程添加另一个步骤 比如说我有一组虚拟订单 Supplier Destination Req Time Prd Code Prd Description Qty A B 01
  • 什么是日志记录?如何使用 Apache Commons 日志记录?

    Web 应用程序服务器希望记录哪些信息 为什么 据我了解 org apache commons logging Log 是一个抽象了其他Logging类提供的功能的接口 这同样适用于接口LogFactory 我试图理解的代码有 Log au
  • jQuery Mobile:页面事件触发的顺序是什么?

    我必须快速构建应用程序的原型 并且我想确切地知道在哪里插入各种应用程序逻辑 您能否迭代使用 PhoneGap 和 jQueryMobile 时的事件及其触发顺序 如果能够清楚地了解以下事件 顺序 那就太好了 A 当您第一次打开应用程序时 B
  • 在 gradle-node-plugin 中配置 nodeModulesDir

    我尝试设置 npm 包的缓存 这是我的插件配置 node version 4 5 0 npmVersion 3 10 6 distBaseUrl https nodejs org dist download true workDir fil
  • 如何对 MySQL 中的 UNION 查询中的多个字段求和?

    我目前正在学习如何使用MySQL在查询中我陷入了两难的境地 目前 我有 2 个查询从多个表中获取数据 两个查询都包含相同数量的列字段和字段名称 为简单起见 查询的输出如下所示 查询一 FieldOne FieldTwo FieldThree
  • Android上如何实现app子组件的模块化结构?

    我的 Android 主应用程序将包含一个主程序 以及一些预安装的模块 然后我想稍后提供不同的模块 最好作为单独的文件 模块如 位置 天气 议程 你将如何实现这一目标 我想将已安装 存在的模块保留在数据库中 因此 有时我必须将模块放入数据库
  • ng-grid 中的默认 headerCell 模板

    考虑以下 angularJs 代码片段 var myHeaderCellTemplate div class div class ngHeaderText col displayName img src PLUS ICON png div