LigerUi的Form表单展示
2017-11-02 19:01
621 查看
这次主要是对ligerui的form进行简单的展示 接着上次的需求,这次会用到一些比较复杂的页面组合,比如页面里面的form还需要嵌套table表格,比如下图:
首先介绍一下这个页面主要的一些功能,可以在选择商品的标签页内容里面引入商品,点击之后弹出一个表格框,是多选的,然后选择商品添加到该页面的table里面,同时可以切换到选择范围的标签页,功能也类似商品,选择店铺范围弹出一个表格让你选择该商品价格所能影响的门店范围,也可以对价格,折扣进行调整,完了之后会自动重新计算
其实这是一个整体的form,包括下面的标签选择页里面的表格,只不过框架原本是不支持嵌套表格的,因为form对象是一个整体,table是另外一个整体,它设计的初衷只是在里面添加input的这些属于form表单的一些子元素的,没办法,所以这个时候为了能在form的标签页里面引入表格,把渲染之后的代码拿来,然后在里面填充自己的table,不过因为js渲染和拿渲染之后的代码虽然页面效果都是一样的,但是失去了js的效果,所以js的事件还得自己手动添加上去。
html代码如下:
<body style="padding: 6px; overflow: hidden;">
<div id="form2"></div>
<div id="range" class="l-form">
<div class="l-form-tabs">
<ul class="ui-tabs-nav ui-helper-clearfix">
<li class="ui-state-default ui-tabs-selected" data-index="0" style=" width:67px;text-align:center;">选择商品</li>
<li class="ui-state-default" data-index="1" style=" width:67px;text-align:center;">选择范围</li>
</ul>
<div class="contain">
<div class="ui-tabs-panel ui-widget-content" data-index="0">
<div class="l-form-container">
<!--这里添加的一个按钮 -->
<div class="l-button" style="width: 60px;margin-bottom:-10px;" onclick="f_import()">
<div class="l-button-l"></div>
<div class="l-button-r"></div>
<span>引入商品</span>
</div>
<!--这一行是对表格的渲染 -->
<div id="maingrid" style="margin-top:20px"></div> <br/>
</div>
</div>
<div class="ui-tabs-panel ui-widget-content" data-index="1" style="display: none;">
<div class="l-form-container">
<!--这里添加的一个按钮 -->
<div class="l-button" style="width: 60px;margin-bottom:-10px;" onclick="f_import1()">
<div class="l-button-l"></div>
<div class="l-button-r"></div>
<span>选择范围</span>
</div>
<!--这一行是对表格的渲染 -->
<div id="maingrid1" style="margin-top:20px"></div> <br/>
<div class="l-clear"></div>
</div>
</div>
</div>
</div>
</div>
<div class="l-button" style="width: 60px;" onclick="search()">
<div class="l-button-l"></div>
<div class="l-button-r"></div>
<span>保存</span>
</div>
</body>
其实第一个form2是通过js渲染的,然后后面的标签页是拿渲染之后的代码和自己的表格嵌套进去组合形成的,自己也就在标签页的内容里面加了一个按钮和一个表格,看的源码才发现不能直接通过ligerform来渲染,所以万不得已才使用的这种方式,一般来讲都是让js来渲染的,这样一方面简单快速,另一方面页面简洁,阅读代码只需要看js文件就可以了,查错或者修改也非常简单。
首先介绍一下这个页面主要的一些功能,可以在选择商品的标签页内容里面引入商品,点击之后弹出一个表格框,是多选的,然后选择商品添加到该页面的table里面,同时可以切换到选择范围的标签页,功能也类似商品,选择店铺范围弹出一个表格让你选择该商品价格所能影响的门店范围,也可以对价格,折扣进行调整,完了之后会自动重新计算
其实这是一个整体的form,包括下面的标签选择页里面的表格,只不过框架原本是不支持嵌套表格的,因为form对象是一个整体,table是另外一个整体,它设计的初衷只是在里面添加input的这些属于form表单的一些子元素的,没办法,所以这个时候为了能在form的标签页里面引入表格,把渲染之后的代码拿来,然后在里面填充自己的table,不过因为js渲染和拿渲染之后的代码虽然页面效果都是一样的,但是失去了js的效果,所以js的事件还得自己手动添加上去。
html代码如下:
<body style="padding: 6px; overflow: hidden;">
<div id="form2"></div>
<div id="range" class="l-form">
<div class="l-form-tabs">
<ul class="ui-tabs-nav ui-helper-clearfix">
<li class="ui-state-default ui-tabs-selected" data-index="0" style=" width:67px;text-align:center;">选择商品</li>
<li class="ui-state-default" data-index="1" style=" width:67px;text-align:center;">选择范围</li>
</ul>
<div class="contain">
<div class="ui-tabs-panel ui-widget-content" data-index="0">
<div class="l-form-container">
<!--这里添加的一个按钮 -->
<div class="l-button" style="width: 60px;margin-bottom:-10px;" onclick="f_import()">
<div class="l-button-l"></div>
<div class="l-button-r"></div>
<span>引入商品</span>
</div>
<!--这一行是对表格的渲染 -->
<div id="maingrid" style="margin-top:20px"></div> <br/>
</div>
</div>
<div class="ui-tabs-panel ui-widget-content" data-index="1" style="display: none;">
<div class="l-form-container">
<!--这里添加的一个按钮 -->
<div class="l-button" style="width: 60px;margin-bottom:-10px;" onclick="f_import1()">
<div class="l-button-l"></div>
<div class="l-button-r"></div>
<span>选择范围</span>
</div>
<!--这一行是对表格的渲染 -->
<div id="maingrid1" style="margin-top:20px"></div> <br/>
<div class="l-clear"></div>
</div>
</div>
</div>
</div>
</div>
<div class="l-button" style="width: 60px;" onclick="search()">
<div class="l-button-l"></div>
<div class="l-button-r"></div>
<span>保存</span>
</div>
</body>
其实第一个form2是通过js渲染的,然后后面的标签页是拿渲染之后的代码和自己的表格嵌套进去组合形成的,自己也就在标签页的内容里面加了一个按钮和一个表格,看的源码才发现不能直接通过ligerform来渲染,所以万不得已才使用的这种方式,一般来讲都是让js来渲染的,这样一方面简单快速,另一方面页面简洁,阅读代码只需要看js文件就可以了,查错或者修改也非常简单。
相关文章推荐
- symfony2中FormType字段在new和edit表单中展示不同的字段
- 对ligerUI的ligerForm方法生成的表单字段禁用或启用
- ligerUI form表单里的filed的类型根据另外个filed的值改变而改变
- form表单处理——使用servlet展示用户名、密码
- LigerUI中根据表单查询条件进行查询,使用表格Grid展示
- form表单使用ajaxsubmit上传文件,并验证
- FORM 表单的查询方法
- jQuery formValidator表单验证插件
- 循环遍历form元素里的表单元素
- javascprit form表单提交前验证以及ajax返回json
- FillForm网页表单填写插件(用于火狐浏览器,自动填表,自动表单,填写表单)
- jquery插件EasyUI中form表单提交实例分享
- jsp 获取表单值, 提交类型为multipart/form-data处理
- form的onsubmit事件--表单提交前的验证最佳实现方式
- form表单验证以及扩展验证方法
- form表单javascript验证(防遗忘)
- Form表单中method="post/get'的区别
- Js 提交 form 表单
- Form Services方式发布带有Managed Code的表单模板
- spring mvc时jsp页面表单关联form属性多层关联问题.