模板制作-S1开发手册

相关技术点：
> Js,jquery,html

> baiduTemplate
* baiduTemplate简单好用的Javascript模板引擎 1.0.6 版本，主要用于模板的输出 
* http://baidufe.github.com/BaiduTemplate

文件列页制作：
![图片alt](/upload/picture/20230802/d30a193daebad61281f1206bac4516f6.png ''图片title'')

1、列表区域

制作表格模板，列表数据的头部和字段列
![图片alt](/upload/picture/20230802/9494f350a269d8093fc3a27d4f740bae.png ''图片title'')

加载数据后，会自动通过以下JS模板格式把数据渲染输出，加载到表格中的<tbody></tbody>
![图片alt](/upload/picture/20230802/67c194effa13443273323ea12efc3094.png ''图片title'')

![图片alt](/upload/picture/20230802/d9b471cc737fe36004317bcb2faaded6.png ''图片title'')

调用全局函数执行数据加载，,这个函数会通过ajax方式请求后端数据返回json格式数据，然后通过js模板（baiduTemplate）引擎渲染，输出到页面

数据列表中操作

![图片alt](/upload/picture/20230802/10806f736493fed9ae00f862a6e31100.png ''图片title'')

> Class=”ajax-open” 				执行操作方式，打开一个页或者请求一个页面
Data-url=’ajax后台请求地址’    执行的方法地址
Data-ids=’请求传递的参数’		执行地址请求的参数，格式为json字符串格式

2、操作区域

模板是通过layer.open打开的方式，打开一个新的页面，并且已经二次封装，只需要标签中增加className和属性就可以了。

![图片alt](/upload/picture/20230802/89a449938781bec994d5ae4953bd3b7d.png ''图片title'')

> 
Class:
ajax-open  		当前页面，弹出打开一个全新页面
ajax-open-more  	当前页面，弹出打开一个全新页面，并且把列表中选择的参数传到打开的新页面中去
ajax-get   		用get方式执行请求一个地址
ajax-get-more   	用get方式执行请求一个地址，并且把列表中选择的参数传到打开的新页面中去

> ajax-del   		用get方式执行请求一个地址执行删除操作
confirm  		在执行ajax-get ajax-del 时提示是否执行当前操作

> ajax-goto 			从当前页执行跳转到下一个页面，和传统页面跳转相似，从A页跳到B页面

# 属性：

> data-url  打开页面的地址 ，这个为必填参数

## 点击添加，打开一个页面

```html
<a  class="btn btn-info btn-outline ajax-open" data-url="{:url('CstCustomer/upload')}"><i class="fa fa-upload"></i> 导入</a>
```

> Class=“ajax-open” 打开一新的窗口页面
Data-url=””	添加窗口页面的链接地址

## 选择执行
```html
<a  class="btn btn-info btn-outline ajax-get-more" data-url="{:url('CstCustomer/publick)}"><i class="fa fa-upload"></i>转入公海
</a>
```

> Class=“ajax-get-more” 请求执行一个地址
Data-url=””		 执行的链接地址

选择列表中的checkbox ,点击“转入公海”执行请求data-url中的地址，同时会把选择checkbox数据传递执行的地址中去，

如请求地址：
http://localhost:8002/index.php/crm/CstClue/gotopublic.html

请求参数：
Id=12,11

## 选择列表数据打开一个新页面

```html
 <a  class="btn btn-info btn-outline ajax-open-more" data-url="{:url('CstCustomer/transfer')}"><i class="fa fa-upload"></i> 移交</a>

```
> 
Class=“ajax-open-more” 打开一新的窗口页面
Data-url=””	打开窗口页面的链接地址

选择列表中的checkbox ,点击“移交”打开新的页面窗口data-url中的地址，同时会把选择checkbox数据传递执行的地址中去，

如请求地址：
http://localhost:8002/index.php/crm/CstClue/gotopublic.html

请求参数：
Id=12,11