layui混合案列问题

叁歲伎倆 2021-10-30 07:28 545阅读 0赞

所有项都是在组件中完成

<table> 
 <tbody> 
  <tr> 
   <td>layui.config({base: 'test/js/'})</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>.use(['mockjax', 'testTablePlug', 'laydate'], function () { </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var $ = layui.jquery</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>, layer = layui.layer //弹层</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>, form = layui.form //弹层</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>, table = layui.table //表格</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>, laydate = layui.laydate //日期控件</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>, tablePlug = layui.tablePlug //表格插件</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>, testTablePlug = layui.testTablePlug // 测试js模块</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>, renderFormSelectsIn = layui.renderFormSelectsIn // 针对form在特定场合下的渲染的封装</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>, formSelects = layui.formSelects; //多选下拉插件</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>// 当前这个测试页面测试的重点不是智能重载，所以关掉该功能，实际上该功能也是默认关闭的，可以不执行下面这句代码，也可以强制指定。</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>// tablePlug.smartReload.enable(true); // 默认就是打开的</td> 
  </tr> 
 </tbody> 
</table>

（针对layui table中select搜素项）

<table> 
 <tbody> 
  <tr> 
   <td>// 处理操作列</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var fn1 = function (field) { </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>return function (data) { </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>// return data[field];</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var value = data[field];</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>return [</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>'&lt;select name="city" lay-filter="city_select" lay-search="true" value="' + value + '"&gt;',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>'&lt;option value="" &gt;请选择或搜索&lt;/option&gt;',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>'&lt;option value="北京" ' + (value === '北京' ? 'selected' : '') + '&gt;北京&lt;/option&gt;',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>'&lt;option value="天津" ' + (value === '天津' ? 'selected' : '') + '&gt;天津&lt;/option&gt;',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>'&lt;option value="上海" ' + (value === '上海' ? 'selected' : '') + '&gt;上海&lt;/option&gt;',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>'&lt;option value="广州" ' + (value === '广州' ? 'selected' : '') + '&gt;广州&lt;/option&gt;',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>'&lt;option value="深圳" ' + (value === '深圳' ? 'selected' : '') + '&gt;深圳&lt;/option&gt;',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>'&lt;option value="佛山" ' + (value === '佛山' ? 'selected' : '') + '&gt;佛山&lt;/option&gt;',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>'&lt;/select&gt;'</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>].join('');</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>};</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>};</td> 
  </tr> 
 </tbody> 
</table>

field: 'city', title: '城市', search: true, edit: false, width: 150, type: 'normal', templet: fn1('city')

<table> 
 <tbody> 
  <tr> 
   <td>// 监听表格中的下拉选择将数据同步到table.cache中</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>form.on('select(city_select)', function (data) { </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var selectElem = $(data.elem);</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var tdElem = selectElem.closest('td');</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var trElem = tdElem.closest('tr');</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var tableView = trElem.closest('.layui-table-view');</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = data.value;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>});</td> 
  </tr> 
 </tbody> 
</table>

![1607083-20190716141618816-1237547204.png][]

（针对formselect案列）

<table> 
 <tbody> 
  <tr> 
   <td>// 爱好列</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var fnLike = function (d) { </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var likes = [</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>{value: 'write', title: '写作'},</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>{value: 'read', title: '阅读'},</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>{value: 'daze', title: '发呆'}</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>];</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>return [</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>'&lt;select name="like" xm-select="like_selects_' + (d.id || (new Date().getTime() + '_' + Math.ceil(Math.random() * 1000000))) + '" xm-select-show-count="2"&gt;', // xm-select实际的作用就跟id差不多，所以实际使用中要注意唯一性，</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>// '&lt;option value="" &gt;&lt;/option&gt;',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>// '&lt;option value="write" ' + (d['like[write]'] ? 'selected' : '') + '&gt;写作&lt;/option&gt;',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>// '&lt;option value="read" ' + (d['like[read]'] ? 'selected' : '') + '&gt;阅读&lt;/option&gt;',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>// '&lt;option value="daze" ' + (d['like[daze]'] ? 'selected' : '') + '&gt;发呆&lt;/option&gt;',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>function () { </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var str = '';</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var values = d.like ? d.like.split(',') : [];</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>layui.each(likes, function (index, like) { </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>str += '&lt;option value="' + like.value + '" ' + (values.indexOf(like.value) !== -1 ? 'selected' : '') + '&gt;' + like.title + '&lt;/option&gt;'</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>});</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>return str;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>}(),</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>'&lt;/select&gt;'</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>].join('');</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>};</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

\{field: 'like', title: '爱好', width: 240, edit: false, templet: fnLike\}

![1607083-20190716142126284-577173945.png][]

<table> 
 <tbody> 
  <tr> 
   <td>// 初始化laydate</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>layui.each(tableView.find('td[data-field="birthday"]'), function (index, tdElem) { </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>tdElem.onclick = function (event) { </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>layui.stope(event)</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>};</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>laydate.render({ </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>elem: tdElem.children[0],</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>// closeStop: tdElem,</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>format: 'yyyy/MM/dd',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>done: function (value, date) { </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var trElem = $(this.elem[0]).closest('tr');</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>table.cache.demo[trElem.data('index')]['birthday'] = value;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>}</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>})</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>});</td> 
  </tr> 
 </tbody> 
</table>

\{field: 'birthday', title: '生日', edit: false, width: 120\}

https://sun\_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled.html?v1.0.0-bate2

码云[https://gitee.com/sun\_zoro/layuiTablePlug][https_gitee.com_sun_zoro_layuiTablePlug]

<table> 
 <tbody> 
  <tr> 
   <td><span>&lt;div <span>class="<span>layui-form-item"&gt;</span></span></span></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><span>&lt;div <span>class="<span>layui-block"&gt;</span></span></span></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><span>&lt;label <span>class="<span>layui-form-label"&gt;日历(todo)<span>&lt;/label&gt;</span></span></span></span></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><span>&lt;div <span>class="<span>layui-input-block"&gt;</span></span></span></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><span>&lt;div <span>id="<span>calendar_laydate" <span>lay-data="<span>{value: ''}"&gt;<span>&lt;/div&gt;</span></span></span></span></span></span></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><span>&lt;/div&gt;</span></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><span>&lt;/div&gt;</span></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><span>&lt;/div&gt;</span></td> 
  </tr> 
 </tbody> 
</table>

![1607083-20190716180703730-1500654638.png][]

<table> 
 <tbody> 
  <tr> 
   <td>laydate.render({ </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>elem: '#calendar_laydate',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>position: 'static',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>multiple: ',',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>calendar: true,</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>weekStart: 1,</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>theme: 'calendar',</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>showBottom : false,</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>mark: function () { </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var mark = {};</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>mark[util.toDateString(null, 'yyyy-MM-dd')] = '今天&lt;i class="layui-icon layui-icon-star-fill" title="你好！"&gt;&lt;/i&gt;';</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>return mark;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>}(),</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>ready: function () { </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var index = $(this.elem[0]).attr('lay-key');</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var elem = $('#layui-laydate' + index);</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var dateNow = new Date();</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var dateToday = [dateNow.getFullYear(), dateNow.getMonth()+1, dateNow.getDate()].join('-');</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>var tdElem = elem.find('td[lay-ymd="'+dateToday+'"]');</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>if (tdElem.length &amp;&amp; !tdElem.hasClass('.layui-this')) { </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>tdElem.get(0).click();</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>}</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>}</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>});</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

时间案列码云地址

https://sun\_zoro.gitee.io/laydatepro/testLaydate.html?v1.0.0

转载于:https://www.cnblogs.com/java-llp/p/11194785.html

[1607083-20190716141618816-1237547204.png]: /images/20211029/b2d9356c1a53495fb94f9ab7e6565d7b.png
[1607083-20190716142126284-577173945.png]: /images/20211029/93076bba19d74098b664c8ff8f8b1f11.png
[https_gitee.com_sun_zoro_layuiTablePlug]: https://gitee.com/sun_zoro/layuiTablePlug
[1607083-20190716180703730-1500654638.png]: /images/20211029/21328e0cd27e458d905fe8adb9ae507d.png