1. 程式人生 > >Axure Repeater實現表格的分頁,新增,查詢,刪除,編輯

Axure Repeater實現表格的分頁,新增,查詢,刪除,編輯

第二次接觸axure,發現了axure的好多新的功能。

  1. 文字的超連結:呵呵,之前都是通過控制FontStyle(color屬性和下劃線)

  1. 輸入框型別驗證

  1. 輸入框提示

  1. Button Shape,自定義按鈕。


  1. repeater控制元件

Repeat從字面上理解就是重複,下面我們來講一下如何使用repeater控制元件實現對資料的增刪改查

Repeater最初拖到頁面中是

雙擊進入單個重複項的編輯視窗,不要被編輯視窗中的小矩形框限制住思維。我們首先看到的應該是頁面下方的

  1. repeater繫結資料

我們將頁面中的矩形框刪除,填入6label,並調整間距和高寬。對6label合理命名。在頁面下方的

Repeater Dataset 填寫資料

我們現在已經在一個重複項中拖入了6label,併為拖入主頁面中repeater,設定了資料集,現在我們要將每個重複項繫結到資料集中的每一條記錄中,如果資料集中有4條記錄,那麼主頁中的repeater就會顯示4行。

現在我們理清對應關係,就是一條記錄對應一個重複項。每個重複項中的一個label,對應一條記錄中的一個欄位,我們接下來繫結這種對應關係。

在頁面下方的Repeater Item Interactions中選擇

瀏覽器中的顯示效果

  1. 實現分頁

表格一般都帶有分頁,repeater也封裝了分頁,在單個重複項的編輯視窗下方進行相應的分頁設定

那麼如何在頁面中控制repeater的分頁呢?在頁面中拖入兩個label,和四個控制分頁("第一頁,上一頁,下一頁,最後一頁")的圖片。

先為這四個按鈕新增OnClicke事件

為兩個lablel賦值。

分頁效果(為了檢視分頁效果,我們設為每頁1條記錄)在這裡沒有做到點選4個按鈕控制當前頁號(第?頁)的改變,請讀者自行設計。

  1. 實現查詢

  1. 搜尋按鈕的單擊事件

  1. 實現新增

  1. repeater新增行的每個欄位賦上文字框對應的值。
  1. 刪除已選中行

這個功能的實現思路與網頁使用是一致的,先選中,後刪除.

只需兩個事件,標記repeater中的單擊行(這個事件是在repeater

的單個重複項視窗操作的)

刪除標記行(刪除按鈕的OnClick事件)

  1. 編輯事件

編輯事件,我實現的有點複雜,大家有好的方法可以跟我說

第一步同刪除是一樣的,都是標記單擊行(在repeater的單個重複項的編輯視窗)

第二步的編輯視窗是一致的,我們利用變數,將標記行的每個欄位值用變數儲存下來。

第三步為編輯彈框的文字框賦值(主頁面的編輯視窗)

按鈕的OnClick事件

選擇對應的全域性變數

此處儲存的操作,跟添加里的儲存是一樣的,不贅述。

相關推薦

Axure Repeater實現表格新增查詢刪除編輯

第二次接觸axure,發現了axure的好多新的功能。 文字的超連結:呵呵,之前都是通過控制FontStyle(color屬性和下劃線) 輸入框型別驗證 輸入框提示 Button Shape,自定

JS實現表格排序模糊搜尋

 整個的功能分為三個部分,都是來自不同的前輩們貢獻的資源,整合在了一起,雖然還是有些繁瑣,但是可以使用^_^ 模糊搜尋不記得來自哪裡了.....下面是整個的程式碼,html如下: <!DOCTYPE html> <html lang="en"&g

Vue中BootStrap實現表格功能(頁碼過多時帶省略號)

1、首先需要在vue-cli專案中配置bootstrap,jquery 2、 然後新建vue檔案,如index.vue,index.vue內容如下: 3、配置路由即可執行實現。 <template> <div class="tTable cont

extjs3 操作(帶查詢條件)獲取頁碼、開始行、大小

一、分頁操作 extjs3.x版本做分頁操作時,只需配置PagingToolbar 即可,總的來說還是比較方便的,但是預設情況下是不能進行帶查詢條件的分頁操作的,如何解決呢? //xxx表示檔名,xxx.js xxx.prototype.grid=function(){

vue根據表格前端實現方法

html: <el-table :data="tableData.slice((curPage-1)*pagesize,curPage*pagesize)" border style="width: 100%">

基於freemarkssm和Oracle實現功能

freemark頁面`<#list mesgList as mesg> m e

TP5 layui 陣列表格 (返回全部資料再加上陣列)

layui 陣列表格 分頁問題,如果返回是全部資料,layui分頁就不能用, 因為layui是通過介面只會取得需要的那一頁的資料,不會多返回其它陣列 一、用例子說明: 4.5 獲取課堂錄製下的所有課件 展示互動返回直播的所有回放列表,展示互動是直接返回該直播的所有

帶有的列表的跳轉後返回時怎麼實現保留數等資訊

我們通過一個列表,進入了下一個頁面,返回列表頁面的時候,怎麼實現保留頁面資料 eg:當我們從列表的第4頁去編輯這條資訊,那麼當編輯完成後我們是不是返回到列表頁,那麼列表頁應該顯示第幾頁的資料呢? 解決方案:(樓主的專案是vue+element)  攜帶引數 當頁面

利用VUE框架實現列表功能

原創作品轉載請註明出處 先來看一下效果圖: 功能描述: 1. 點選頁面序號跳轉到相應頁面; 2. 點選單左/單右,向後/向前跳轉一個頁面; 3. 點選雙左/雙右,直接跳轉到最後一頁/第一頁; 3. 一次顯示當前頁面的前三個與後三

結合TabViewPagerFragment實現簡單滑動

在APP設計當中,使用ViewPager和Fragment來實現分頁滑動並不少見,該設計可以利用少量的空間來實現多內容的展示。效果圖如下: 以下是實現該功能的程式碼: MainActivity public class MainActivity e

javaWeb(十五)頁面模型的抽取實現頁面(Servlet+JSP)

頁面分頁好像挺煩的,涉及到分頁模型的抽取,在此做個記錄,簡單的分頁實現 頁面分頁就是在前端分頁顯示資料庫的資料,基本思路就是將分頁需要顯示的幾個要素放到分頁模型裡面,然後在前端顯示 步驟如下: 分頁取資料的SQL語句 //從2開始,選五個資料,即3,4,5

Android Demo之旅 ListView底部新增載入更多按鈕實現資料

在我們的實際專案中,資料應該說是很多的,我們的ListView不可能一下子把資料全部載入進來,我們可以當滾動條滾動到ListView的底部的時候,給一個更多的提示,當我們點選它即載入下一頁的資料,相當與我們的分頁效果,參考網上的東西,寫了一個小小的demo,並總結了一些知識

java 匯出百萬級資料到excel實現

最近修改了一個匯出員工培訓課程的歷史記錄(一年資料),匯出功能本來就有的,不過前臺做了時間限制(只能選擇一個月時間內的),還有一些必選條件, 匯出的資料非常有侷限性。心想:為什麼要做出這麼多條件限制呢?條件限制無所謂了,能限制匯出資料的準確性,但是時間? 如果我想匯出一年的資料,還要一月一月的去匯出,這也太扯

JS 實現簡單的Table表格效果(假

單純的JS實現分頁 先來說說思路: 1.就是 window.onload的時候 呼叫方法 進行主頁的分頁     這裡 要先獲取 表格的總行數   然後在減去  表格 的頭部 和尾部等其他一些 沒有儲存資料的行數 先把所有的資料行根據根據TR的 ID  樣式都調整為 隱藏

利用ajax技術實現通用在jsp頁面呈現

package com.softeem.dto;//dto資料傳輸物件 import java.util.ArrayList; import java.util.List; public class PageBean<T> {private int curren

基於jquery 的外掛前端實現效果

上次分享了一款jquery外掛,現在依舊分享這個外掛,不過上一次分享主要是用於regular框件,且每一頁資料都是從後端獲取過來的,這一次的分享主要是講一次性獲取完資料 然後手動進行分頁。此需求基本上是和前端搜尋掛鉤的。所有的資料都在頁面裡只是展示的不同。這樣前端搜尋就能從全

程矢Axure夜話:中繼器系列視訊教程之中繼器表格動態

案例描述:使用中繼器表格分頁動態生成頁碼 知識點: 中繼器的分頁中繼器新增中繼器刪除 效果圖: AxShare線上效果預覽:  原型下載地址:中繼器表格分頁動態生成頁碼.rp 線上視訊: 實現步驟: 更新中…..

Kotlin實戰案例:帶你實現RecyclerView查詢功能(仿照主流電商APP可切換列表和網格效果)

隨著Kotlin的推廣,一些國內公司的安卓專案開發,已經從Java完全切成Kotlin了。雖然Kotlin在各類程式語言中的排名比較靠後(據TIOBE釋出了 19 年 8 月份的程式語言排行榜,Kotlin竟然排名45位),但是作為安卓開發者,掌握該語言,卻已是大勢所趨了。 Kotlin的基礎用法,整

Asp.Net北大青鳥總結(四)-使用GridView實現真假

void 每次 第三方控件 ati exec open() lld ret ges 這段時間看完了asp.net視頻。可是感覺到自己的學習好像沒有鞏固好,於是又在圖書館裏借了幾本關於asp.net的書感覺真的非常好自己大概對於asp.net可以實現主要的小D

SpringData JPA實現CRUD,與多參數排序

method clas asc spring from pda des home 參數   Spring Data 項目的目的是為了簡化構建基於 Spring 框架應用的數據訪問計數,包括非關系數據庫、Map-Reduce 框架、雲數據服務等等,SpringData JPA