您的位置：首页 > 产品设计 > UI/UE

easyUI使用

2016-07-26 16:40 423 查看

使用1. 变色

情景描述：datagrid显示的数据添加自定义列“操作”，要实现“操作”后让这行变色

    如果使用datagrid的rowStyler，必须要有个filed的条件，当条件满足时这行变色，但是我这里“操作”后真是没有条件没有任何标志

    解决办法是添加隐藏的自定义列，field在后台赋值，由于我这里是两个表，审核后的数据放到另一个表中，所以我要比较原始表和审核表的数据，

若审核表中已存在，则设置IsCheck的值为1，然后前端用rowStyler实现变色

        { field: 'IsCheck', title: '是否已审核', width: 100, hidden: true }

使用2：布局

情景描述：layout布局采用全屏的东西南北中布局，中间显示主要内容

    要想实现全屏，必须将<body class="easyui-layout">这句设置上，我的页面使用的是easyui的demo页面full.html

<body class="easyui-layout">

   <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">

   </div>

   <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>

   <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>

   <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>

   <div data-options="region:'center',title:'Center'">

   </table>

   </div>

</body>

   其中west部分放菜单，center部分放iframe(设置如下)，iframe显示菜单的链接内容，此时要让链接页面的内容在iframe中全屏显示，

<iframe id="frame_content" name="show" frameborder="no" border="0" marginwidth="0" marginheight="0"

                style="display: block;" allowtransparency="true" scrolling="no" width="100%"

                height="100%"></iframe>

嵌套的页面也要<body class="easyui-layout">这样设置，可以在里面使用easyui-tabs，要设置fit:true。

注意：iframe的height虽然设置为100%，但会显示滚动条，单纯的加overflow：true是没用的，原因是iframe是行内元素，因此会有line-height造成iframe下面有空白，

所以使用*{line-height: 0;}可以解决问题

使用3：若想在表格中显示多个复选框选项(如下图)，借助于formatter

后台返回的是list转换成的json，到前端解析一下，遍历，其中checked是list中保存的对象的一个属性。

没贴多少代码，主要是因为功能穿插的有些凌乱，只是说一下思想。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： easyui datagrid

相关文章推荐

新的分享

章节导航