結合Domino打造全功能的Grid

在domino開發中我們經常會遇到表單上需要一個類似table的元件，你可以增删改等。比如我有一個張報核單據，上面需要詳細列出每項金額的明細，我們先看完成後的效果：

上面的圖就是我用extjs完成的。

這個grid元件可以完成增加，删除，插入，修改，排序等功能。每項功能的操作都隻是針對grid，不需要額外的FormPanel。輕按兩下單元格就可以修改。

這個元件我做的盡可能通用，由于是專門為domino平台定制，grid中的資料均存儲在notes的多值域中。使用這個gird元件，你需要提供以下幾個數組：

（1）：多值域名的數組(第一列對應的序号多值域的名字必須為Seq)

（2）：gird title顯示文字的數組

（3）：每個列對應的編輯單元格時需要的Ext對應元件的名稱，如果你這個元件為ComboBox，那麼你需要在提供一個數組，在數組的對應位置存儲你要在ComboBox中顯示的内容。

1.Ext中DateField實際你取出值存到多值域的時候是一個UTC的時間。如果你在新的系統中使用該元件，這個沒有問題。由于我的系統原來的多值域存儲的時間為“2009-08-08”類似形式，這樣在顯示的時候就無法識别了。

2.元件的校驗實際上就是Ext各個form元件的校驗，這個要根據不同系統的業務來處理。

3.權限控制，在domino中的系統中工作流居多，不同的流程條件下需要有權限控制，這個有兩種方案，

方案一：根據不同條件對grid的列是否設定Editor屬性，并控制按鈕的屬性。

方案二：由于grid是呈現在表單上的div元素，可以控制該div的隐藏條件，然後根據是否能取得到div dom來判斷去執行個體不同的grid。

由于在domino中js和表單的互動不是很友善，我選擇方案二。

4. 7.關于編号的維護隻維護新增，插入時，删除時不維護。

5.1.三個公用的函數如下：

1. 将多值域轉換為數組傳回

2. 多數組進行增，删，插入

3. 根據不同的類型去執行個體化不同的Ext元件

function CoToArray(name)

{

var arrName=new Array();

if(Ext.getDom(name).value!="")

{

arrName=Ext.getDom(name).value.split(";");

}

return arrName;

}

//0:add,1:delete,2:insert

function OpMultiFieldArray(arrName,type,index,value)

for(i=0;i<arrName.length;i++)

var arrOpArray=CoToArray(arrName[i])

switch (type)

{

case 0:

if(0==i)

arrOpArray.push(value-1);

else

arrOpArray.push("");

break;

case 1:

arrOpArray.splice(index,1);

case 2:

if(0==i)

arrOpArray.splice(index,0,value);

else

arrOpArray.splice(index,0,"");

}

Ext.getDom(arrName[i]).value=arrOpArray.join(";");

}

function EditorCM(type)

var editorCM;

case "Read":

editorCM=null;

case "TextField":

editorCM=new Ext.form.TextField();

case "DateField":

editorCM=new Ext.form.DateField(

{format: 'Y-m-d'});

case "TimeField":

editorCM=new Ext.form.TimeField();

case "ComboBox":

editorCM=new Ext.form.ComboBox();

case "NumberField":

editorCM=new Ext.form.NumberField();

return editorCM;

5.2.下面是Ext.onReady部分：

Ext.onReady(function(){

//需要使用者指定的程式部分

var arrName=new Array("Seq","Loc","ODate","OTime","ExType","Cur","Fees","RMBFees","FFees","Memo");

var arrTitleName=new Array("序号","發生地點","發生日期","發生時間","費用别","币别","原币金額","稽核金額","人民币金額","摘要說明");

var arrTypeName=new Array("Read","TextField","DateField","TimeField","ComboBox","ComboBox","NumberField","NumberField","NumberField","TextField");

var cmbStore=['交通費','膳雜費','其他'];

var cmbMoStore=['RMB','USD','TWD'];

var arrCmbStore=new Array();

arrCmbStore[4]=cmbStore;

arrCmbStore[5]=cmbMoStore;

//-----construct the read colunm of grid

var arrColMRead=new Array();

for(var k=0;k<arrName.length;k++)

{

arrColMRead[k]={header:arrTitleName[k], dataIndex: arrName[k], sortable: true};

}

var colMRead=new Ext.grid.ColumnModel(arrColMRead);

//-----end construct the read colunm of grid

//----- construct the edit colunm of grid

var sm = new Ext.grid.CheckboxSelectionModel();

var arrColM=new Array();

for(var k=0;k<=arrName.length;k++)

if(k==0)

{

arrColM[k]=sm;

else

if(arrTypeName[k-1]=="ComboBox")

{

arrColM[k]={header:arrTitleName[k-1], dataIndex: arrName[k-1], sortable: true,editor:new Ext.form.ComboBox(

{store:arrCmbStore[k-1],

displayField:'state',

typeAhead: true,

mode: 'local',

forceSelection: true,

triggerAction: 'all',

emptyText:'Select a state...',

selectOnFocus:true,

y:30})};

else if(arrTypeName[k-1]=="DateField")

{

arrColM[k]={header:arrTitleName[k-1], dataIndex: arrName[k-1], sortable: true,renderer:Ext.util.Format.dateRenderer('Y-m-d'),editor:EditorCM(arrTypeName[k-1])};

}

else

arrColM[k]={header:arrTitleName[k-1], dataIndex: arrName[k-1], sortable: true,editor:EditorCM(arrTypeName[k-1])};

var colM=new Ext.grid.ColumnModel(arrColM);

//-----end construct the edit colunm of grid

// create the Data Store

var strData= new Array();

if(CoToArray(arrName[0])!="")

for (i=0;i<CoToArray(arrName[0]).length ;i++ )

{

strData[i]=new Array();

for(var j=0;j<arrName.length;j++)

strData[i][j]=CoToArray(arrName[j])[i]

}

var store1=new Ext.data.SimpleStore(

{data:strData,

autoLoad:true,

fields:arrName

});

// create the read grid

if(Ext.getDom("grid")!=null)

{

var grid = new Ext.grid.GridPanel({

store: store1,

renderTo:"grid",

cm:colMRead,

width:1220,

header:true,

height:200

});

}

//---begin grid1

if(Ext.getDom("grid1")!=null)

{

var grid1 = new Ext.grid.EditorGridPanel({

renderTo:"grid1",

title:"可編輯的增删改元件",

height:300,

width:1230,

sm:sm,

cm:colM,

store:store1,

//autoExpandColumn:10,

listeners: {

//修改部分會更新域

afteredit: function(e) {

var arrObj= CoToArray(e.field);

arrObj[e.row]=e.value;

Ext.getDom(e.field).value=arrObj.join(";");

} ,

beforeedit:function(e){

validateedit:function(e){

}

});

//---end grid1

//-------add1 button click

if(Ext.getDom('Add1')!=null)

{

var button = Ext.get('Add1');

var win;

button.on('click', function(){

var re=new Ext.data.Record(

Seq:grid1.getStore().getCount()+1

});

var store2=grid1.getStore();

store2.add(re);

store2.commitChanges();

//------begin add at last

OpMultiFieldArray(arrName,0,0,(grid1.getStore().getCount()+1));

});

//------end add1 button click

//----------delete1 button click

if(Ext.getDom('Delete1')!=null)

var delbutton=Ext.get('Delete1');

delbutton.on('click',function(){

var _rd = grid1.getSelectionModel().getSelected() ;

var delindex=grid1.getStore().indexOf(_rd);

if(grid1.getSelectionModel().getCount()==1)

{

grid1.getStore().remove(_rd);

grid1.getStore().commitChanges();

}

else

{

alert('每次隻能删除一條!');

}

OpMultiFieldArray(arrName,1,delindex);

//-----------end delete1 buttom click

//-----------begin insert1 buttom click

if(Ext.getDom('Insert1')!=null)

var insbutton=Ext.get('Insert1');

insbutton.on('click',function(){

var _rd = grid1.getSelectionModel().getSelected() ;

var insindex=grid1.getStore().indexOf(_rd);

Seq:insindex+1

});

if(grid1.getSelectionModel().getSelected()!=null)

store2.insert(insindex,re);

store2.commitChanges();

alert('請選擇要插入的位置！');

//------begin insert at index

OpMultiFieldArray(arrName,2,insindex,insindex);

var arrSeq=CoToArray(arrName[0]);

for(i=0;i<arrSeq.length;i++)

arrSeq[i]=i+1;

Ext.getDom(arrName[0]).value=arrSeq.join(";");

//------end insert at index

//-----------end iinsert1 buttom click

5.3.子表單中需要加入的html代碼部分：

注意這些都為内嵌html，并且需要設定隐藏條件。

還有建立需要的多值域.

本文轉自生魚片部落格園部落格，原文連結：http://www.cnblogs.com/carysun/archive/2009/09/10/domino-grid.html，如需轉載請自行聯系原作者

結合Domino打造全功能的Grid

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條