Foxtable(狐表)用戶欄目Web開發 → EasyUI里datagrid不同視圖之間的切換


  共有553人關注過本帖樹形打印復制鏈接

主題:EasyUI里datagrid不同視圖之間的切換

帥哥喲,離線,有人找我嗎?
jnletao
  1樓 | 信息 | 搜索 | 郵箱 | 主頁 | UC


加好友 發短信
等級:四尾狐 帖子:855 積分:6633 威望:0 精華:0 注冊:2013/7/7 13:37:00
EasyUI里datagrid不同視圖之間的切換  發帖心情 Post By:2019/10/21 14:54:00 [只看該作者]

在EasyUI的datagrid做了個卡片視圖

以下內容為程序代碼:

1 $('#tt').datagrid({
2         view: cardview
3     });


以下內容為程序代碼:

1 var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
2         renderRow: function(target, fields, frozen, rowIndex, rowData){
3             var cc = [];
4             cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;">');
5             if (!frozen){
6                 var aa = rowData.itemid.split('-');
7                 var img = 'shirt' + aa[1] + '.gif';
8                 cc.push('<img src="images/' + img + '" style="width:150px;float:left">');
9                 cc.push('<div style="float:left;margin-left:20px;">');
10                 for(var i=0; i<fields.length; i++){
11                     var copts = $(target).datagrid('getColumnOption', fields[i]);
12                     cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');
13                 }
14                 cc.push('</div>');
15             }
16             cc.push('</td>');
17             return cc.join('');
18         }
19     });


現在想做個視圖快速切換,即在正常表格與卡片表格之間快速切換。
$('#tt').datagrid({view: default view});
$('#tt').datagrid('reload');
不管用

 回到頂部
帥哥喲,離線,有人找我嗎?
reachtone
  2樓 | 信息 | 搜索 | 郵箱 | 主頁 | UC


加好友 發短信 一級勛章
等級:版主 帖子:1953 積分:16712 威望:0 精華:19 注冊:2008/9/2 10:09:00
  發帖心情 Post By:2019/10/21 17:06:00 [只看該作者]

在使用datagrid之前,先設置兩個變量:
var view = $.fn.datagrid.defaults.view;    //這是默認的視圖
var cardview  = .....                 //這是你的卡片視圖

在datagrid生成之后,再使用以下代碼切換:
$('#tt').datagrid({view: view}); //默認視圖
$('#tt').datagrid({view: cardview}); //卡片視圖


 回到頂部
帥哥喲,離線,有人找我嗎?
reachtone
  3樓 | 信息 | 搜索 | 郵箱 | 主頁 | UC


加好友 發短信 一級勛章
等級:版主 帖子:1953 積分:16712 威望:0 精華:19 注冊:2008/9/2 10:09:00
  發帖心情 Post By:2019/10/21 17:38:00 [只看該作者]

抽空做了一個簡單的例子:http://www.diyofficecode.com/test/study/191021/test.html

默認是正常的表格視圖:
圖片點擊可在新窗口打開查看


點擊開關按鈕后,就變成了卡片視圖:
圖片點擊可在新窗口打開查看



[本帖被加為精華]
 回到頂部
帥哥喲,離線,有人找我嗎?
jnletao
  4樓 | 信息 | 搜索 | 郵箱 | 主頁 | UC


加好友 發短信
等級:四尾狐 帖子:855 積分:6633 威望:0 精華:0 注冊:2013/7/7 13:37:00
  發帖心情 Post By:2019/10/21 19:56:00 [只看該作者]

謝謝版主,通過CSS定義,我把他做成了listview樣式

圖片點擊可在新窗口打開查看此主題相關圖片如下:qq截圖20191021195335.jpg
圖片點擊可在新窗口打開查看

圖片點擊可在新窗口打開查看此主題相關圖片如下:qq截圖20191021195349.jpg
圖片點擊可在新窗口打開查看


 回到頂部
帥哥喲,離線,有人找我嗎?
reachtone
  5樓 | 信息 | 搜索 | 郵箱 | 主頁 | UC


加好友 發短信 一級勛章
等級:版主 帖子:1953 積分:16712 威望:0 精華:19 注冊:2008/9/2 10:09:00
  發帖心情 Post By:2019/10/21 21:41:00 [只看該作者]

圖片點擊可在新窗口打開查看圖片點擊可在新窗口打開查看圖片點擊可在新窗口打開查看

有了css基礎就可以很方便的做出各種視圖效果!
其實,listview更簡便的處理方法是遍歷之后append添加進來就行了,就像訂單系統中的“工作快速導航”,完全是動態的:

圖片點擊可在新窗口打開查看
[此貼子已經被作者于2019/10/21 21:45:02編輯過]

 回到頂部
帥哥喲,離線,有人找我嗎?
wei0769
  6樓 | 信息 | 搜索 | 郵箱 | 主頁 | UC


加好友 發短信
等級:六尾狐 帖子:1244 積分:11860 威望:0 精華:0 注冊:2013/4/10 14:38:00
  發帖心情 Post By:2019/10/22 20:33:00 [只看該作者]

圖片點擊可在新窗口打開查看

 回到頂部
229期22选5开奖结果