成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS實現(xiàn)填報時對修改過的單元格進行標(biāo)識

zone / 1528人閱讀

摘要：描述在填報預(yù)覽時，對單元格編輯后，其左上角有個紅色標(biāo)記，但非常不明顯，用戶很難注意到。有沒有什么好的辦法，對單元格操作后，將其做較明顯的特殊標(biāo)記處理，方便用戶識別呢如圖所示對單元格進行操作后，將其單元格進行背景色著色文本加粗等標(biāo)記。

描述

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

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

實現(xiàn)方法

打開模板 %FR_HOME%WebReportWEB-INFreportletsdocFormLineFormLineForm.cpt

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

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

js代碼如下：

1. var location = this.options.location;   

2. //獲取控件的位置  

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

4. //單元格列號  

5. var col = cr.col;  

6. //單元格行號  

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代碼，可直接使用下面的，更加簡單：

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樣式

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

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

添加加載結(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. });

使用這種方法后只需要在填報模板的加載結(jié)束事件中寫一次代碼即可，不需要再在每個控件的編輯結(jié)束事件中多帶帶寫代碼

效果預(yù)覽

保存模板，點擊填報預(yù)覽，效果如上圖。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82464.html

相關(guān)文章

  • Web報表工具FineReport的JS API開發(fā)（二）

    摘要：如果報表嵌在網(wǎng)頁的中，在外獲取對象如下常用方法方法說明獲取指定單元格中的控件獲取指定名字的控件獲取指定名稱的擴展控件，返回一個數(shù)組表單預(yù)覽或參數(shù)界面，都有一個對象。 上次介紹FineReport的JS API中的第一類開發(fā)--FR，這次就來介紹一下FS和contentWindow類的開發(fā)。1 FSFS是數(shù)據(jù)決策系統(tǒng)中的js接口，比如說FS.tabPane.addItem，先介紹幾類操作...

    freewolf 評論0 收藏0

  • FineReport中如何用JavaScript解決控件值刷新不及時

    摘要：優(yōu)化過后則可以將光標(biāo)強制跳轉(zhuǎn)到單元格，使其獲得光標(biāo)，進而強制單元格刷新值。常見場景用戶通過文本框填報了值，而需要對這個值進行取出判斷的時候，經(jīng)常會取空值，只有用戶點擊了空白區(qū)域，才可以正常取值。 我們經(jīng)常利用按鈕進行一些頁面值的處理工作，但是默認(rèn)的邏輯造成，每次新填報的值，需要點擊下空白區(qū)域或是執(zhí)行某個其他操作才可以被正確讀取，那么我們?nèi)绾翁幚砟兀?例：當(dāng)我們用常規(guī)取值的時候，雖然B3...

    Xufc 評論0 收藏0

  • FineReport填報分頁設(shè)置

    摘要：示例下面我們以行數(shù)據(jù)為例，每頁顯示行，分頁顯示。數(shù)據(jù)準(zhǔn)備新建數(shù)據(jù)集訂單明細。重復(fù)標(biāo)題行選中標(biāo)題行，右鍵，選擇設(shè)置重復(fù)標(biāo)題行。 問題描述 進行FineReport數(shù)據(jù)填報時，如果數(shù)據(jù)量過大，由于前端瀏覽器的性能限制，如果將數(shù)據(jù)全部展現(xiàn)出來，速度會非常的慢，影響用戶體驗，這時候大家就會想，填報是否能像分頁預(yù)覽一樣進行分頁呢，實現(xiàn)只加載當(dāng)前頁，從而提高性能，下面我們就來介紹填報分頁的制作與瀏...

    Rindia 評論0 收藏0

  • FineReport填報分頁設(shè)置

    摘要：示例下面我們以行數(shù)據(jù)為例，每頁顯示行，分頁顯示。數(shù)據(jù)準(zhǔn)備新建數(shù)據(jù)集訂單明細。重復(fù)標(biāo)題行選中標(biāo)題行，右鍵，選擇設(shè)置重復(fù)標(biāo)題行。 問題描述 進行FineReport數(shù)據(jù)填報時，如果數(shù)據(jù)量過大，由于前端瀏覽器的性能限制，如果將數(shù)據(jù)全部展現(xiàn)出來，速度會非常的慢，影響用戶體驗，這時候大家就會想，填報是否能像分頁預(yù)覽一樣進行分頁呢，實現(xiàn)只加載當(dāng)前頁，從而提高性能，下面我們就來介紹填報分頁的制作與瀏...

    xialong 評論0 收藏0

  • SpreadJS 純前端表格控件 V12.2 發(fā)布更新

    摘要：用不到行代碼，在前端實現(xiàn)的全部功能千萬前端開發(fā)者翹首企盼，終發(fā)布更新六大功能特性，帶來更多便利，用不到行代碼，在前端實現(xiàn)的全部功能是一款基于的純前端電子表格控件，以高速低耗高度類似可無限擴展為產(chǎn)品特色，提供移動跨平臺和瀏覽器支持，同時滿足等 用不到100行代碼，在前端實現(xiàn)Excel的全部功能 千萬前端開發(fā)者翹首企盼，SpreadJS V12.2 終發(fā)布更新：六大功能特性，帶來更多便利，...

    FrozenMap 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<