这次主要是对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文件就可以了，查错或者修改也非常简单。