Foxtable(狐表)用户栏目Web开发 → EasyUI里datagrid不同视图之间的切换


  共有411人关注过本帖树形打印复制链接

主题:EasyUI里datagrid不同视图之间的切换

帅哥哟,离线,有人找我吗?
jnletao
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:四尾狐 帖子:854 积分:6617 威望: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


加好友 发短信 一级勋章
等级:版主 帖子:1948 积分:16675 威望: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


加好友 发短信 一级勋章
等级:版主 帖子:1948 积分:16675 威望: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


加好友 发短信
等级:四尾狐 帖子:854 积分:6617 威望: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


加好友 发短信 一级勋章
等级:版主 帖子:1948 积分:16675 威望: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


加好友 发短信
等级:五尾狐 帖子:1156 积分:11330 威望:0 精华:0 注册:2013/4/10 14:38:00
  发帖心情 Post By:2019/10/22 20:33:00 [只看该作者]

图片点击可在新窗口打开查看

 回到顶部