开源 企业版 高校版 私有云 模力方舟 AI 队友
代码拉取完成,页面将自动刷新
forked from easysoft/zui
加入 Gitee
与超过 1400万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
已有帐号? 立即登录
文件
master
分支 (2)
标签 (4)
master
gh-pages
zui_1.2.stable_20141118
zui_1.2.beta_20141030
zui_1.1.stable_20140805
zui_1.0.stable_20140724
master
分支 (2)
标签 (4)
master
gh-pages
zui_1.2.stable_20141118
zui_1.2.beta_20141030
zui_1.1.stable_20140805
zui_1.0.stable_20140724
克隆/下载
克隆/下载
提示
下载代码请复制以下命令到终端执行
为确保你提交的代码身份被 Gitee 正确识别,请执行以下命令完成配置
初次使用 SSH 协议进行代码克隆、推送等操作时,需按下述提示完成 SSH 配置
1 生成 RSA 密钥
2 获取 RSA 公钥内容,并配置到 SSH公钥 中
在 Gitee 上使用 SVN,请访问 使用指南
使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议 配置并使用私人令牌 替代登录密码进行克隆、推送等操作
Username for 'https://gitee.com': userName
Password for 'https://userName@gitee.com': # 私人令牌
master
分支 (2)
标签 (4)
master
gh-pages
zui_1.2.stable_20141118
zui_1.2.beta_20141030
zui_1.1.stable_20140805
zui_1.0.stable_20140724
zui
/
docs
/
example
/
datatable.html
zui
/
docs
/
example
/
datatable.html
datatable.html 7.10 KB
一键复制 编辑 原始数据 按行查看 历史
Catouse 提交于 2014年11月26日 17:57 +08:00 . * build. 
<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <meta name="description" content="ZUI,一个简单吸引人的前端框架。">

 <meta name="author" content="Zentao">



 <title>ZUI - 开源HTML5跨屏框架</title>



 <link href="../css/zui.min.css" rel="stylesheet">

 <link href="../css/example.css" rel="stylesheet">



 <!--[if lt IE 9]>

 <script src="../../assets/html5shiv.js"></script>

 <script src="../../assets/respond.js"></script>

 <![endif]-->

</head>



<body>

 <article>

 <h1>Datatable</h1>

 <div class="segment">

 <div id="dtFromData"></div>

 <table class="table table-bordered table-striped" id="datatable">

 <thead>

 <tr>

 <th class='text-center' data-col-class='text-center'>Lorem.</th>

 <th class='text-primary'>Saepe?</th>

 <th style="color: #999">Necessitatibus.</th>

 <th>Minus.</th>

 <th class='flex-col' data-width='100'>Veritatis?</th>

 <th class='flex-col' data-width='300'>Nulla.</th>

 <th class='flex-col' data-width='200'>Hic.</th>

 <th>Voluptatem.</th>

 </tr>

 </thead>

 <tbody>

 <tr>

 <td colspan="2">Lorem.</td>

 <td>Corporis.</td>

 <td>Ipsam.</td>

 <td>Voluptatibus!</td>

 <td>Consequatur.</td>

 <td>Accusamus!</td>

 <td class="hahaha">Obcaecati.</td>

 </tr>

 <tr>

 <td>Lorem.</td>

 <td>Sit!</td>

 <td>Sit.</td>

 <td>Iure.</td>

 <td>Minima!</td>

 <td>Eveniet!</td>

 <td>Qui.</td>

 <td class="hahaha">Non.</td>

 </tr>

 <tr>

 <td>Lorem.</td>

 <td>Nam!</td>

 <td>Sequi.</td>

 <td>Laborum?</td>

 <td>Deleniti.</td>

 <td>Amet.</td>

 <td>Eligendi.</td>

 <td class="hahaha">Praesentium!</td>

 </tr>

 <tr>

 <td>Lorem.</td>

 <td>Quibusdam?</td>

 <td>Sapiente!</td>

 <td>Nihil!</td>

 <td>Doloribus.</td>

 <td>Aliquid.</td>

 <td>Magnam.</td>

 <td class="hahaha">Consectetur?</td>

 </tr>

 <tr>

 <td>Lorem.</td>

 <td>Suscipit.</td>

 <td>Nemo.</td>

 <td>Quasi.</td>

 <td>Cupiditate.</td>

 <td>Reprehenderit!</td>

 <td>Aspernatur.</td>

 <td class="hahaha">Quos.</td>

 </tr>

 <tr>

 <td>Lorem.</td>

 <td>Vel!</td>

 <td>Voluptatibus.</td>

 <td>Reprehenderit.</td>

 <td>Fugit.</td>

 <td>Vero!</td>

 <td>Sed.</td>

 <td class="hahaha">Molestias.</td>

 </tr>

 <tr>

 <td>Lorem.</td>

 <td>Vitae.</td>

 <td>Blanditiis.</td>

 <td>Perspiciatis.</td>

 <td>Officiis.</td>

 <td>Doloremque.</td>

 <td>Molestiae?</td>

 <td class="hahaha">Vitae.</td>

 </tr>

 <tr>

 <td>Lorem.</td>

 <td>Quod.</td>

 <td>Nostrum.</td>

 <td>Optio.</td>

 <td>Minus.</td>

 <td>Molestiae!</td>

 <td>Animi.</td>

 <td class="hahaha">Dolorum?</td>

 </tr>

 <tr>

 <td>Lorem.</td>

 <td>Reiciendis.</td>

 <td>Delectus.</td>

 <td>Beatae.</td>

 <td>Amet!</td>

 <td>Qui!</td>

 <td>Rem!</td>

 <td class="hahaha">Reprehenderit.</td>

 </tr>

 <tr>

 <td>Lorem.</td>

 <td>Consequuntur.</td>

 <td>Cum.</td>

 <td>Fuga?</td>

 <td>Tempore.</td>

 <td>Fugit.</td>

 <td>Nemo.</td>

 <td class="hahaha">Dicta!</td>

 </tr>

 <tr>

 <td>Lorem.</td>

 <td>Illum?</td>

 <td>Totam.</td>

 <td>Quia!</td>

 <td>Fuga!</td>

 <td>Nemo.</td>

 <td>Nesciunt?</td>

 <td class="hahaha">Itaque.</td>

 </tr>

 </tbody>

 <tfoot>

 <td colspan="8">页脚测试</td>

 </tfoot>

 </table>

 <button class="btn btn-primary" type="button" id="reloadDatatable">reload</button>

 </div>

 </article>



<script src="../../assets/jquery.js"></script>

<script src="../js/zui.js"></script>

<script src="../js/example.js"></script>



<script>

$(function()

{

 $('#datatable').datatable({fixedHeaderOffset: 41, checkable: true});

 $('#dtFromData').datatable

 ({

 customizable: true, checkable: true,

 // sortable: true,

 sort: function(event)

 {

 },

 mergeRows: true,

 scrollPos: 'out',

 fixedLeftWidth: '45%',

 fixedHeaderOffset: 41,

 storage: true,

 data:

 {

 cols:

 [

 {sort: 'down', width: 80, text: '#', type: 'number', flex: false, colClass: 'text-center', css: 'color: #444'},

 {width: 'auto', text: 'Name', type: 'string', flex: false},

 {width: 100, text: 'Mood and taste', type: 'string', flex: false},

 {width: 150, text: 'Date', type: 'date', flex: true, cssClass: 'text-center', mergeRows: true},

 {sort: false, width: 250, text: 'Desc', type: 'string', flex: true, cssClass: 'text-center'},

 {width: 100, text: 'Pri', type: 'number', flex: true, colClass: 'text-center'},

 {width: 120, text: 'Status', type: 'string', flex: true, colClass: 'text-center'}

 ],

 rows:

 [

 {checked: false, data: ['1', '<a href="###">Catouse</a>', 'happy', '2014年08月07日', 'null is good', '1', 'OK']},

 {checked: true, data: ['2', '<a data="fd" href="###">Shine</a>', 'angry', '2014年08月06日', 'god', '2', 'OK']},

 {checked: false, data: ['3', '<a href="###">Minus</a>', 'Veritatis', '2014年08月07日', 'Nulla', '1', 'Ipsam']},

 {cssClass:'danger', checked: false, data: ['4', '<a href="###">Consequatur</a>', 'Accusamus', '2014年08月07日', 'Obcaecati', '1', 'Qui']},

 {checked: false, data: ['5', '<a href="###">Lorem</a>', 'Quos', '2014年08月05日', 'Molestiae', '1', 'Qui']},

 {checked: false, data: ['6', '<a href="###">Suscipit</a>', 'Vitae', '2014年08月06日', 'Suscipit', '1', 'AE']},

 {checked: false, data: ['7', '<a href="###">Vel</a>', 'Blanditiis', '2014年08月06日', 'Aspernatur', '1', 'Sed']},

 {checked: false, data: ['8', '<a href="###">Vero</a>', 'Officiis', '2014年08月07日', 'Quos', '1', 'Vel']}

 ]

 }

 }).on('sort.zui.datatable', function(event)

 {

 });



 $('#reloadDatatable').click(function(event) {

 $('.hahaha').text('click at' + (new Date()).toString());

 $('#datatable').datatable('load');

 });

});

</script>

</body>

</html>
Loading...
举报
举报成功
我们将于2个工作日内通过站内信反馈结果给你!
请认真填写举报原因,尽可能描述详细。
请选择举报类型
取消
发送
误判申诉

此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。

如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。

取消
提交

简介

html5跨屏前端框架
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
编辑仓库简介
简介内容
主页
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/ericoder/zui.git
git@gitee.com:ericoder/zui.git
ericoder
zui
zui
master
点此查找更多帮助

搜索帮助

评论
仓库举报
回到顶部
登录提示
该操作需登录 Gitee 帐号,请先登录后再操作。
立即登录
没有帐号,去注册

AltStyle によって変換されたページ (->オリジナル) /