1 Star 0 Fork 244

相非非 / oneplatform

forked from vakinge / oneplatform 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
front-dev-guide.md 3.51 KB
一键复制 编辑 原始数据 按行查看 历史
vakinge 提交于 2018-11-09 18:04 . +

提交form表单,

只需要一个样式名称J_ajaxSubmit搞定

<form class="layui-form" action="/api/account/add">  
    <div class="layui-form-item">
		<label class="layui-form-label">用户名</label>
		<div class="layui-input-block">
		   <input type="text" name="username" placeholder="中文、字母、数字、下划线" lay-verify="required" class="layui-input">
		</div>
	</div> 
    <div class="layui-form-item">
		<label class="layui-form-label">手机</label>
		<div class="layui-input-block">
		   <input type="text" name="mobile" placeholder="手机号码" class="layui-input">
		</div>
	</div>
    <div class="layui-form-item"> 
     <div class="layui-input-block"> 
        <input type="button"  class="layui-btn layui-btn-normal J_ajaxSubmit" value="保存"/>
        <input type="reset" class="layui-btn layui-btn-primary" value="重置"/>
     </div> 
    </div> 
</form> 

加载页面数据(如编辑页面)

  • dataLoad:指定加载数据路径(id参数通过页面传入,如:edit.html?id=x)
  • onFinishCallback:加载完成后回调
  • bindAttr:绑定加载数据字段
<div class="admin-main" dataLoad="/api/account/{id}" onFinishCallback="onDataLoadedCallback"> 
  <form class="layui-form" action="/api/account/update">  
   <input type="hidden" name="id" bindAttr="id" />
   <div class="layui-form-item">
   	<label class="layui-form-label">用户名</label>
   	<div class="layui-input-block">
   	   <input type="text" bindAttr="username" name="username" placeholder="中文、字母、数字、下划线" lay-verify="required" class="layui-input">
   	</div>
   </div> 
   <div class="layui-form-item">
   	<label class="layui-form-label">手机</label>
   	<div class="layui-input-block">
   	   <input type="text" bindAttr="mobile" name="mobile" placeholder="手机号码" class="layui-input">
   	</div>
   </div>
   <div class="layui-form-item"> 
    <div class="layui-input-block"> 
       <input type="button"  class="layui-btn layui-btn-normal J_ajaxSubmit" value="保存"/>
       <input type="reset" class="layui-btn layui-btn-primary" value="重置"/>
    </div> 
   </div> 
  </form> 
 </div>  
结合layui的模板引擎绑定加载数据复杂字段
 <ul bindAttr="template:parameters_tpl"> 
  <script type="text/html" id="parameters_tpl">
    {{# layui.each(d.parameters, function(index, item){ }}
     <li>{{ item.name }}</li>
    {{# }); }}
</script> 
 </ul> 
结合layui的模板引擎独立加载数据
<div class="layui-form-item">
   	<label class="layui-form-label">角色</label>
   	<div class="layui-input-block">
   	   <ul dataLoad="/api/role/list" template-id="rolelist_tpl" onFinishCallback="onFinishCallback"></ul>
          <script type="text/html" id="rolelist_tpl">
           {{# layui.each(d, function(index, item){ }}
           <li style="display: inline;padding-left: 5px;"><input type="checkbox" name="roleIds" lay-skin="primary" title="{{ item.name }}" value="{{ item.id }}"></li>
           {{# }); }}
          </script>
   	</div>
</div>

动态下拉框

<select asnycselect="/api/dsconfig/options"> 
  <option value="">请选择数据源</option> 
</select> 

确认操作

增加样式名J_confirm即可

  • act-url:确认操作的地址
  • ajax-method:请求方法 ,默认GET
  • data-id:绑定的数据id(按需)
<a href="javascript:;" class="J_confirm layui-btn layui-btn-danger layui-btn-mini" act-url="../admin/config/delete/{{ item.id }}">删除</a>

其他还有很多,看oneplatform.js慢慢发现吧

马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
Java
1
https://gitee.com/xiangff/oneplatform.git
git@gitee.com:xiangff/oneplatform.git
xiangff
oneplatform
oneplatform
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891