Angularjs中的IGGird创建和使用

AngularJs

Ignite 中的Iggrid 官网：http://www.igniteui.com/grid/angular

Angularjs的Iggrid使用有两种方式，第一种为iggrid官网介绍方式。第二种为Option方式，第二种方式和原有的js使用方式一样不做过多介绍，主要介绍第一种，下面做一一介绍。

Ig-grid方式：

       <ig-grid id="grid1"

                         data-source="data"

                         data-source-type="json"

                         width="100%"

                         height="400px"

                         primary-key="ProductID"

                         auto-commit="true"

                         auto-generate-columns="false">

                    <columns>

                        <column key="ProductID" header-text="ID" width="50px" data-type="number"></column>

                        <column key="ProductName" header-text="Product Name" width="250px" data-type="string"></column>

                        <column key="QuantityPerUnit" header-text="Units On Order" width="200px" data-type="string"></column>

                        <column key="UnitsInStock" header-text="Unit Price" width="100px" data-type="number" template="{{getHtml('#colTmpl')}}"></column>

                    </columns>

                    <features>

                        <feature name="Updating">

                            <column-settings>

                                <column-setting column-key="ProductID" read-only="true">

                                </column-setting>

                            </column-settings>

                        </feature>

                        <feature name="Paging" page-size="10">

                        </feature>

                        <feature name="Sorting">

                        </feature>

                    </features>

                </ig-grid>

以上示例为官网示例，可以查看官网，下面主要介绍使用方式，具体请自己按照以下使用方式使用：

http://www.igniteui.com/help/api/2016.2/ui.igGrid 为igGrid  API。API主要分Overview/Options/Events/Methods/Theming，下面主要介绍Options/Events。

1/Options：主要介绍igGrid中的方法，它的主要使用方式是将方法追加到ig-grid标签后，以features为例，如图：

一律追加在其后，然后根据方法里面的使用方式一一添加自己的意向。

再举例添加tooltips，根据官网tooltips使用方法，在features下添加新标记：

<column-settings>

<column-setting column-key="key" allow-tooltips="true"></column-setting>

                    </feature>

如果我们要添加Events事件，则需要直接写成ig-grid的属性，比如：dataRendered事件，就是在Grid加载完后对Gird的处理，这时，我们的添加方式就是在上图的auto-generate-columns后添加事件：event-data-rendered=‘调用事件方法’即可。方法事件名称组成方式，第一个event是因为在API中这是一个事件，所以添加event，data-redered的写法是因为这个事件的名称为dataRendered。这个和angularjs中引用组件有关系，所有大写字母改小写，并在前面加“-”。不懂得孩子，请自行到Angularjs官网查询自定义指令的使用方式

2/Option方式和原生js方式一样，呈现示例即可，不做过多解释：

this.CompGridNew = {

columns: [

{ headerText: "AAAA", key: "BrEntityNameCh", dataType: "string", width: "20%", template: "<a οnclick='angular.element(\"#newGrid\").scope().vm.cellClick(\"${Recode_No}\")'>${BrEntityNameCh}</a>"},

autoGenerateColumns: false,

autoGenerateLayouts: false,

renderCheckboxes: true,

enableUTCDates: true,

adjustVirtualHeights: false,

autofitLastColumn: true,

dataSource: $this.basicInfo,//此为数据源

width: "100%",

responseDataKey: "Recode_No",

dataRendered: function (evt, ui) {

//$this.$compile(ui.owner.element)($this.$scope);

generateCompactJSONResponse: false,

features: [

{

type: "local"

{

type: "local",

mode: "simple"

{

type: "local",

pageSize: 50,

showPageSizeDropDown: false

{

multipleSelection: true,

multipleCellSelectOnClick: true,

mode: "row",

skipChildren: true

{

enableCheckBoxes: true,

enableSelectAllForPaging: true,

requireSelection: true,

enableRowNumbering: false,

rowSelectorColumnWidth: 42,

checkBoxStateChanged: function (evt, ui) {

//console.log(ui);

//获取当前checkbox的状态

//var checkStatus = ui.state;

//获取pk的值

//var recodeNo = ui.rowSelector[0].nextSibling.innerText;

//if (checkStatus == "on") {

// $this.checkedList[recodeNo] = recodeNo;

//}

//if (checkStatus == "off") {

// delete $this.checkedList[recodeNo];

//}

}

{

columnSettings: [

{ columnKey: "key", allowTooltips: true },

visibility: "always",

showDelay: 1000,

hideDelay: 500

}

]

};

界面使用：<div ig-grid="vm.CompGridNew" id="newGrid"></div>请注意“CompGridNew”。这个是在后台对ig-gird操作的最重要属性。在这里有一个重要点就是:在后台添加点击事件，ng-click不会被认为是一个时间，会被认为是一个标记，所以点击事件使用了js的方式，没有使用angularjs的方式，这个是和第一种方式的一大区别。至于为什么，这个和angularjs的机制有关系，请自行查阅相关典籍

在angularjs中通过ts编写时，如何添加中英文转换

第一步，在使用界面（html中）注册: @section scripts

{

angular.module("app")

.factory("注册的名称", function () {

return {

ID: '@资源文件名.ID',

};

})

</script>

}

在后台引用：

constructor(private注册的名称: any) {

使用：this.注册的名称.ID//调试时，可以看到“注册的名称”里面包含所有界面return的所有字段

}

注意：“注册的名称”需唯一，并且是在使用界面注册，也可以在母版页中注册。如果提示找不到或者未发现，一般为注册的名字重复，或者引用方式错误

Angularjs中的IGGird创建和使用相关推荐

AngularJs中的directives（指令part1）
一.指令的职责指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...
AngularJS中使用HTML5摄像头拍照
1. 项目背景公司开发一个网站,在做用户头像修改的时候领导提到增加一个由摄像头拍照实现修改头像的功能.因为我们网站是基于Html5进行开发,所以就直接采用H5来实现拍照.起初觉得这个功能很简单,但是 ...
AngularJS中的指令全面解析(必看)
出处: http://www.jb51.net/article/84665.htm 说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的 ...
转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
如何在AngularJS中使用ng-repeat迭代键和值？
本文翻译自:How to iterate over the keys and values with ng-repeat in AngularJS? In my controller, I have ...
如果我有jQuery背景，那么“ AngularJS中的思考”吗？ [关闭]
已关闭 . 这个问题需要更加集中 . 它当前不接受答案. 想改善这个问题吗? 更新问题,使其仅通过编辑此帖子来关注一个问题. 4年前关闭. 已锁定 . 该问题及其答案被锁定,因为该问题是题外话,但具有 ...
angularjs 中的scope继承关系——（2）
转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html angularjs 中的scope继承关系 ng-include ...
angularjs 中的scope继承关系——（1）
转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html JavaScript 的原型链继承假设父类 parentScop ...
理解AngularJS中的依赖注入
作者 CraftsCoder 冷月无声 - 博客频道 - CSDN.NET http://blog.csdn.net/jaytalent/article/details/50986402 本文结合一些 ...

Angularjs中的IGGird创建和使用

Angularjs中的IGGird创建和使用相关推荐

最新文章

热门文章