layui表单重载和简单的表单工具栏使用（SSM+layui）

学校实训项目踩坑记录，这里主要用到SSM+layui

我是要通过搜索栏进行数据搜索并在表单中展示搜索结果，同时表单有一定的其他功能。

html部分

//搜索栏
<div class="layui-form">
	<input type="text" name="bsposition" autocomplete="off" placeholder="请输入职业名称" class="layui-input">
	<button lay-submit type="submit" class="layui-btn layui-btn-normal" lay-filter="search">搜索button>
div>	

//表单部分
<div class="layui-container">
  <table 
         lay-data="{ id:'newTable', url:'showBsjson.do', even: true, limit: 10, height: 800, cellMinWidth: 30, toolbar: '#toolbar'}" 
         class="layui-table" 
         lay-filter="demo" >
    <thead>
      <tr>
        <th lay-data="{field:'', minWidth: }">th>
        <th lay-data="{field:''}">th>
        <th lay-data="{field:'', minWidth: }">th>
        <th lay-data="{field:'', sort: true}">th>
        <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">th>
      tr>
    thead>	
  table>
div>

script部分

//头部工具栏
<script type="text/html" id="toolbar">
			<a class="layui-btn layui-btn-sm" lay-event="refresh">刷新</a>
</script>

//行工具栏
<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
</script>

<script type="text/javascript">
layui.use(['form','jquery','table','layer'],function(){
		var table=layui.table;
		var form=layui.form;
		var $=layui.jquery;
		var layer=layui.layer;
		
		//行事件
		table.on('tool(demo)', function(obj){
		    var data = obj.data;
				
      	//都用switch方便扩展
		    switch(obj.event){
			    case 'detail':
			    	layer.msg('ID：'+ data.bsname + ' 的查看操作');
			    	break;		    
		    };
		});
  
		//头部事件
		table.on('toolbar(demo)', function(obj){
		    var data = obj.data;

		    switch(obj.event){
			    case 'refresh':
					table.reload('newTable', {
						  url: 'showBsjson.do',
						});
					break;
		    	};
		});
  
		//搜索事件
		form.on("submit(search)",function(data){
      //将input中的值赋值给input
			var input=$("input").val();
			layer.msg(input);
			table.reload('newTable', {
				  url: 'findSearch.do',
				  where: {
            //这里是往后台控制器处传输的参数：bsposition=input
					  bsposition: input,
				  } 
			});
		});  
 });
</script>	  

注意这头工具和行工具不能写在一起，因为这个低级错误我浪费了些精力。

Controller部分

//展示列表
@RequestMapping("showBsjson")
@ResponseBody
public Grid fun3(Grid Grid) throws Exception {
		List<position> jlist = dao.findList();
		return new Grid(0,"ok",jlist.size(),jlist);
}
//展示搜索结果
@RequestMapping("findSearch")
@ResponseBody
public Grid fun4(String bsposition, Grid Grid) throws Exception {
		List<position> slist = dao.findSearch(bsposition);
		return new Grid(0,"ok",slist.size(),slist);
}

还没全完成，啥模糊查询分页那些的等以后再填坑了。