JS實(shí)現(xiàn)填報(bào)時(shí)怎么對(duì)修改過(guò)的單元格進(jìn)行標(biāo)識(shí)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)JS實(shí)現(xiàn)填報(bào)時(shí)怎么對(duì)修改過(guò)的單元格進(jìn)行標(biāo)識(shí)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

1. 描述

在填報(bào)預(yù)覽時(shí)，對(duì)單元格編輯后，其左上角有個(gè)紅色標(biāo)記，但非常不明顯，用戶很難注意到。有沒(méi)有什么好的辦法，對(duì)單元格操作后，將其做較明顯的特殊標(biāo)記處理，方便用戶識(shí)別呢？

如圖所示：對(duì)單元格進(jìn)行操作后，將其單元格進(jìn)行背景色著色、文本加粗等標(biāo)記。

2. 實(shí)現(xiàn)方法

打開(kāi)模板 %FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt

2.1 方法1：編輯結(jié)束后修改單元格樣式

控件編輯后事件中修改單元格樣式，選中需要設(shè)置的單元格B3:K3，右擊控件設(shè)置>事件編輯，添加一個(gè)編輯結(jié)束事件：

js代碼如下：

1. var location = this.options.location;   

2. //獲取控件的位置  

3. var cr = FR.cellStr2ColumnRow(location);  

4. //單元格列號(hào)  

5. var col = cr.col;  

6. //單元格行號(hào)  

7. var ro = cr.row;  

8. //設(shè)置所在單元格背景色:草綠色   

9. $("tr[tridx="+ro+"]").find("td[col="+col+"]").css("background-color","rgb(153,204,0)");  

10. //設(shè)置所在單元格內(nèi)容:加粗  

11. $("tr[tridx="+ro+"]").find("td[col="+col+"]").css("font-weight","bold");  

js代碼，可直接使用下面的，更加簡(jiǎn)單：

1. var $td=$(arguments[0]);  

2. //當(dāng)前編輯單元格  

3. $td.css("background-color","rgb(153,204,0)");  

4. //設(shè)置所在單元格內(nèi)容:顏色  

5. $td.css("font-weight","bold");  

6. //設(shè)置所在單元格內(nèi)容:加粗  

2.2  方法2 直接修改值改變后的css樣式

使用上述方法的話，必須對(duì)所有填報(bào)控件均要設(shè)置一遍編輯結(jié)束事件，如果模板中填報(bào)控件較多且不是連續(xù)的話，設(shè)置工作量比較大，效率也比較低，其實(shí)在填報(bào)中，每個(gè)單元格值改變后，都會(huì)觸發(fā)內(nèi)部的值改變事件，并且會(huì)給單元格左上角加上小紅色三角，如下圖所示

對(duì)應(yīng)的css類為dirty類，只需要修改css中這個(gè)dirty類的樣式，增加一個(gè)背景色或增加加粗樣式，在單元格值發(fā)生改變后，會(huì)自動(dòng)使用這個(gè)dirty，即可完成對(duì)所有填報(bào)報(bào)表中值發(fā)生改變的控件均調(diào)用這個(gè)樣式，非常簡(jiǎn)單適用，方法如下

添加加載結(jié)束事件，如下圖

代碼如下：

1. contentPane.on("cellselect", function (td){        

2.   $('.dirty').css('background-color',"rgb(153,204,0)");    

3.   //設(shè)置dirty類背景色  

4.   $('.dirty').css('font-weight',"bold");    

5.   //設(shè)置dirty類字體加粗  

6. });    

使用這種方法后只需要在填報(bào)模板的加載結(jié)束事件中寫一次代碼即可，不需要再在每個(gè)控件的編輯結(jié)束事件中單獨(dú)寫代碼

.效果預(yù)覽

保存模板，點(diǎn)擊填報(bào)預(yù)覽，效果如上圖。

上述就是小編為大家分享的JS實(shí)現(xiàn)填報(bào)時(shí)怎么對(duì)修改過(guò)的單元格進(jìn)行標(biāo)識(shí)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。