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的机制有关系，请自行查阅相关典籍
