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下添加新标记：

  <feature name="Tooltips" visibility="always" show-delay="1000" hide-delay="500">

                        <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: [

                    {

                        name: "Sorting",

                        type: "local"

                    },

                    {

                        name: "Filtering",

                        type: "local",

                        mode: "simple"

                    },

                    {

                        name: 'Paging',

                        type: "local",

                        pageSize: 50,

                        showPageSizeDropDown: false

                    },

                    {

                        name: "Selection",

                        multipleSelection: true,

                        multipleCellSelectOnClick: true,

                        mode: "row",

                        skipChildren: true

                    },

                    {

                        name: "RowSelectors",

                        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];

                            //}

 

                        }

                    },

                    {

                        name: "Tooltips",

                        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

{

    <script type="text/javascript">

        angular.module("app")

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

                return {

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

                };

            })

    </script>

}

 

在后台引用：

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

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

}

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