AngularJs中的igGrid编写

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>

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

"ProductName""Product Name""250px""string""QuantityPerUnit""Units On Order""200px""UnitsInStock""Unit Price""100px""number"template"{{getHtml('#colTmpl')}}"</columns>

<features>

 <featurename"Updating"<column-settings>

<column-settingcolumn-keyread-only"true"</column-setting>

</column-settings>

</feature>

"Paging"page-size"10""Sorting"</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: "<aonclick='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",21); font-family:新宋体; font-size:9.5pt">"local",

mode: "simple"

},21); font-family:新宋体; font-size:9.5pt">'Paging',

pageSize: 50,

showPageSizeDropDown: false

},

{

name: "Selection",

multipleSelection: true,

multipleCellSelectOnClick: true,21); font-family:新宋体; font-size:9.5pt">"row",

skipChildren: true

},21); font-family:新宋体; font-size:9.5pt">"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];

//}

}

},21); font-family:新宋体; font-size:9.5pt">"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的机制有关系，请自行查阅相关典籍

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!