Extjs 4 grid中的checkbox的加載時預選中【默認選中】

場景重現:我需要對用戶的角色修改分配相應的權限,在我加載顯示所有可以選擇的權限的時候,我應該保證告訴用戶我哪些已經是選中的了,哪些是還未選擇的,這樣我就有必要對grid中前面的checkbox展示出選中的效果。如圖:

wKioL1MGAl7CA_1nAAD0tOh-7-A866.jpg


Checkbox出現的方法:
       var sm = Ext.create('Ext.selection.CheckboxModel', {
           showHeaderCheckbox: false
       });
在xtype:'grid'下添加:
               selModel: sm,
               multiSelect: true,

去直接實現默認選中的功能是沒有直接的方法的,我們可以通過撇對grid中的stroe的id和獲取到的用戶當前擁有的store中的id獲取到他們說對應於頁面的行號

/**角色權限分配**/
assinRole: function() {
if (role_ListId == null || role_ListId == "") {
CommFun.messBox("請選擇相應角色後再操作!", justsyLang.prompt);
return;
};
var url = "/justsy/role/search/" + role_ListId; //"data/roleID.json";
var view = Ext.widget("Role_Assign");
view.down('form').loadRecord(role_ListObj); //向view的form中添加record
//獲取權限的store中的各個id
var viewStoreId = Ext.getCmp('assignList').store.data.items;
var viewStoreIdList = new Array();
//獲取viewStoreId中的id
for (item in viewStoreId) {
viewStoreIdList.push(viewStoreId[item].data.id);
}
//根據id獲取role詳細信息
Ext.Ajax.request({
url: url,
method: 'GET',
success: function(response) {
response = Ext.JSON.decode(response.responseText);
if (response.success) {
var roleInfoStoreObj = new Object(); //用來存放id查詢詳細信息的數據
var roleInfoStoreIdList = new Array();
var selMod = Ext.getCmp('assignList').getSelectionModel();
roleInfoStoreObj = response.content[0].permissList;
console.log(roleInfoStoreObj);
//獲取roleInfoStoreId中的id
for (items in roleInfoStoreObj) {
roleInfoStoreIdList.push(roleInfoStoreObj[items].id);
}
//循環判斷添加選擇項
for (var i = 0; i < viewStoreIdList.length; i++) {
for (var j = 0; j < roleInfoStoreIdList.length; j++) {
if (viewStoreIdList[i] == roleInfoStoreIdList[j]) {
selMod.select(i, true, false);
};
};
};
}
}
});
view.show();
},

補充說明,我們除了可以通過getSelectionModel下的select通過index選中grid中的row以外,我們也可以通過getSelectionModel下的selectRange進行添加(這個方法是一個添加範圍,當添加的開始點和結束點爲同一個index時候,表示只添加當前index)
Ext.getCmp(id).getSelectionModel().selectRange(startIndex,endIndex,boolen);//boolen表示選中時,之前選中的內容是否清除
對於去除指定grid的row選中我們也可以通過getSelectionModel下的deselectRange進行去除(這裏的deselectRange和之前的selectRange方法的使用是一致的,都是指一個範圍內)



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章