第六章 其他功能第六章 其他功能\6-10 Image設計

6-10 Image設計

這一節將為大家介紹如何在JQuery設計中使用Image的顯示。在JQuery的元件中,我們支持的是對於varchar類型的字串格式文件地址的圖片設計這個例子我們以Products表為使用表單。

在開始設計之前,我們先為Products添加一個地址欄位用於保存Image的文件名稱。

alter table Products add Picture nvarchar(50)

Step1>        使用Wizard快速產生一個sProductsserver端,並將產生的serverdllEEPNetServer->PackageManager中進行掛起。

Step2>        接著,同樣使用Wizard,產生一個TemplateJQuerySingle2的名為bProducts1頁面,並在EEPManager設定權限。

Step3>        現在,我們一起來看看如何設定圖片的元件,首先需要在顯示資料的JQDataGrid上顯示出圖片,這個設定需要在JQdataGridcolumns屬性中設定。

Step4>        Columns的編輯框中,找到Format屬性,並寫入如下內容。

image,folder:files/UploadFile,height:60 其中,folder表示上傳圖片所在的資料夾,height為在grid中顯示的圖片高度。

Step5>        為配合上面保存圖的資料夾的設定,請在JQWebClient的資料夾下相應的產生Files/UploadFile

Step6>        這樣設定完成後,接下來我們要做的就是在編輯資料的部分,我們希望能夠有一個上傳圖片文件的功能。這裡我們打開JQDataFormColumns屬性,找到Picture這個欄位。

Step7>        首先,我們需要將PictureEditor設定為infofileupload

Step8>        然後EditorOption點開右側的按鈕,設定為如下內容:

Step9>        設定完成後,圖片的設計就完成了。當然我也可以做一些進階的功能,如:在將滑鼠浮在圖片上時,圖片可以放大。這個功能只需要將畫面中的任意位置貼入一個JQImageContainer即可。

Step10>     現在我們一起來run已經設定好的畫面

 

 


 

Top of Page