### Combined Layui Module Initialization with Pear Count

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/count.html

A comprehensive example showing the initialization of multiple Layui modules, including 'element', 'code', and 'count'. It demonstrates two `count.up` animations for 'number1' and 'number2' and activates Layui's code highlighting feature, showcasing a typical Layui application setup.

```JavaScript
layui.use(['element', 'code', 'count'], function() { var element = layui.element; var count = layui.count; count.up("number1", { time: 8000, num: 4540.34, regulator: 100 }) count.up("number2", { time: 8000, num: 9832.34, bit: 2, regulator: 100 }) layui.code(); })
```

--------------------------------

### Open Drawer with URL Content

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/drawer.html

This snippet shows how to open a Layui drawer that loads content from a specified URL directly into the drawer's body. Similar to the iframe example, it configures title, position, size, and control buttons.

```JavaScript
$("#layerDrawerURL").click(function () {
  drawer.open({
    legacy: false,
    title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
    offset: 'r',
    area: "80%",
    maxmin: true,
    closeBtn: 1,
    url: window.location.origin + "/view/document/drawerFragment.html"
  })
})
```

--------------------------------

### Open Drawer from Left Offset

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/drawer.html

This example opens a Layui drawer positioned on the left side of the screen with a specified width and custom content. The 'offset: 'l'' property controls the drawer's starting position.

```JavaScript
$("#layerDrawerLeft").click(function(){
  drawer.open({
    legacy: false,
    offset: 'l',
    area: "30%",
    content: "left内容"
  })
})
```

--------------------------------

### Initialize Layui Modules and Drawer Component

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/drawer.html

This snippet initializes the necessary Layui modules, including 'element', 'jquery', 'drawer', 'layer', and 'code', which are essential for using the drawer component and other Layui functionalities. It sets up the global variables for these modules.

```JavaScript
layui.use(['element', 'jquery', 'drawer', 'layer', 'code'], function() {
  var element = layui.element;
  var $ = layui.jquery;
  var drawer = layui.drawer;
  var layer = layui.layer;
  layui.code();
  // ... other drawer examples follow within this scope ...
})
```

--------------------------------

### Open Drawer from Top Offset

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/drawer.html

This example opens a Layui drawer from the top of the screen. The 'offset: "t"' property positions the drawer at the top, displaying custom content.

```JavaScript
$("#layerDrawerTop").click(function () {
  drawer.open({
    legacy: false,
    offset: "t",
    content: "top内容"
  })
})
```

--------------------------------

### Open Drawer with Iframe Content

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/drawer.html

This example demonstrates how to open a Layui drawer that loads its content from an external HTML page via an iframe. It sets the drawer's title, position (right), area, and enables maximize/minimize and close buttons.

```JavaScript
$("#layerDrawerIframe").click(function () {
  drawer.open({
    legacy: false,
    title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
    offset: 'r',
    area: "80%",
    maxmin: true,
    closeBtn: 1,
    iframe: window.location.origin + "/view/document/table.html"
  })
})
```

--------------------------------

### Layui Module Initialization and Variable Setup

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/rule/index.html

Initializes required Layui modules such as 'table', 'treetable', 'form', 'common', 'popup', and 'util'. It also declares local variables to hold references to these Layui modules and jQuery for convenient access throughout the script.

```JavaScript
layui.use(["table", "treetable", "form", "common", "popup", "util"], function() {
  let table = layui.table;
  let form = layui.form;
  let $ = layui.$;
  let common = layui.common;
  let treeTable = layui.treetable;
  let util = layui.util;
  // ... rest of the code within layui.use block
});
```

--------------------------------

### Open Drawer with Custom Content and Button

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/drawer.html

This example opens a Layui drawer with a custom title, HTML content, and a 'Close' button. It demonstrates how to capture the drawer's index and handle the button's click event to close the drawer programmatically.

```JavaScript
$("#layerDrawer").click(function () {
  var index = drawer.open({
    legacy: false,
    title: ['标题', 'font-size:16px;color:#2d8cf0'],
    maxmin: true,
    offset: "
```

--------------------------------

### Layui Module Initialization and Table Configuration

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/table/index.html

Initializes essential Layui modules (table, form, common, popup) and defines the column configuration for the data table. This includes fields like table name, comment, record count, engine, character set, creation time, and an operations toolbar, along with the table rendering setup.

```JavaScript
layui.use(["table", "form", "common", "popup"], function() {
  let table = layui.table;
  let form = layui.form;
  let $ = layui.$;
  let common = layui.common;
  let cols = [
    { type: "checkbox" },
    { title: "表名", field: "TABLE_NAME", templet: function (d) { return '<a class="tab-link" src="' + VIEW_URL + '?table=' + d.TABLE_NAME + '">' + d.TABLE_NAME + '</a>'; } },
    { title: "备注", field: "TABLE_COMMENT" },
    { title: "记录数", field: "TABLE_ROWS", width: 100 },
    { title: "引擎", field: "ENGINE", width: 100 },
    { title: "字符集", field: "TABLE_COLLATION" },
    { title: "创建时间", field: "CREATE_TIME" },
    { title: "操作", toolbar: "#table-bar", align: "center", width: 200 }
  ];
  table.render({
    elem: "#data-table",
    url: SELECT_API,
    page: true,
    cols: [cols],
    skin: "line",
    size: "lg",
    toolbar: "#table-toolbar",
    defaultToolbar: [
      { title: "刷新", layEvent: "refresh", icon: "layui-icon-refresh" },
      "filter",
      "print",
      "exports"
    ]
  });
```

--------------------------------

### Open Drawer from Right Offset

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/drawer.html

This snippet demonstrates opening a Layui drawer from the right side of the screen. It sets the drawer's width and includes custom content, using 'offset: 'r'' for positioning.

```JavaScript
$("#layerDrawerRight").click(function () {
  drawer.open({
    legacy: false,
    offset: 'r',
    area: "30%",
    content: "right内容"
  })
})
```

--------------------------------

### Open Drawer from Bottom Offset

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/drawer.html

This snippet shows how to open a Layui drawer from the bottom of the screen. The 'offset: "b"' property places the drawer at the bottom, displaying custom content.

```JavaScript
$("#layerDrawerBottom").click(function () {
  drawer.open({
    legacy: false,
    offset: "b",
    content: "bottom内容"
  })
})
```

--------------------------------

### Layui Toast Notification Examples with jQuery Click Handlers

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/toast.html

This snippet demonstrates how to initialize and use the `layui.toast` module to display various types of notifications (success, info, error, warning, question) and control their positions. It also shows how to bind these toast calls to jQuery click events for different buttons and how to destroy all active toasts.

```javascript
layui.use(['toast', 'toast', 'jquery', 'layer', 'code', 'element'], function() { var toast = layui.toast; var layer = layui.layer; var $ = layui.jquery; var toast = layui.toast; layui.code(); toast.success({ title: 'Caution', message: 'You forgot important data', position: 'topRight' }); toast.info({ title: 'Caution', message: 'You forgot important data', position: 'topRight' }); toast.error({ title: 'Caution', message: 'You forgot important data', position: 'topRight' }); toast.warning({ title: 'Caution', message: 'You forgot important data', position: 'topRight' }); toast.question({ title: 'Caution', message: 'You forgot important data', position: 'topRight' }); $(".toast-success").click(function() { toast.success({ title: 'Caution', message: 'You forgot important data', position: 'topRight' }); }) $(".toast-failure").click(function() { toast.error({ title: 'Caution', message: 'You forgot important data', position: 'topRight' }); }) $(".toast-warning").click(function() { toast.warning({ title: 'Caution', message: 'You forgot important data', position: 'topRight' }); }) $(".toast-info").click(function() { toast.info({ title: 'Caution', message: 'You forgot important data', position: 'topRight' }); }) $(".toast-question").click(function() { toast.question({ title: 'Caution', message: 'You forgot important data', position: 'topRight' }); }) $(".toast-top-left-btn").click(function(){ toast.info({ title: 'Caution', message: 'You forgot important data', position: 'topLeft' }); }) $(".toast-top-center-btn").click(function(){ toast.info({ title: 'Caution', message: 'You forgot important data', position: 'topCenter' }); }) $(".toast-top-right-btn").click(function(){ toast.info({ title: 'Caution', message: 'You forgot important data', position: 'topRight' }); }) $(".toast-bottom-left-btn").click(function(){ toast.info({ title: 'Caution', message: 'You forgot important data', position: 'bottomLeft' }); }) $(".toast-bottom-center-btn").click(function(){ toast.info({ title: 'Caution', message: 'You forgot important data', position: 'bottomCenter' }); }) $(".toast-bottom-right-btn").click(function(){ toast.info({ title: 'Caution', message: 'You forgot important data', position: 'bottomRight' }); }) $("#closeAll").click(function() { toast.destroy(); }); });
```

--------------------------------

### JavaScript: Load Initial Configuration Data with Layui

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/config/index.html

This script fetches existing configuration data (basic info, menu, and tab settings) from the backend via AJAX and populates the respective Layui forms. It ensures that the admin panel's configuration forms are pre-filled with current settings upon page load.

```javascript
layui.use(["form"], function () { let form = layui.form; let $ = layui.$; $.ajax({ url: "/app/admin/config/get", dataType: "json", success: function (res) { if (res.code) { return layui.popup.failure(res.msg); } form.val("baseInfo", res.logo); $("#image").prev().val(res.logo.image).prev().attr("src", res.logo.image); form.val("menuInfo", res.menu); let tab = res.tab; let index = tab.index; delete tab.index; tab.id = index.id; tab.title = index.title; tab.href= index.href; form.val("tabInfo", res.tab); } }); });
```

--------------------------------

### Initialize Layui Table and Handle Toolbar Events

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/table/modify.html

This snippet initializes a Layui table named 'key-table' with predefined columns and data. It also sets up event listeners for the table's toolbar, specifically for 'add' and 'batchRemove' actions, triggering corresponding JavaScript functions.

```JavaScript
cols: [ { type: "checkbox", fixed: "left" }, { title: "索引名称", field: "name", width: 200, }, { title: "索引字段", field: "columns", templet: "#key-columns", width: 200, }, { title: "索引类型", field: "type", templet: "#key-type", width: 200, }, { type: "space" } ];
table.render({
  elem: "#key-table",
  cols: [cols],
  data: keysData,
  skin: "line",
  size: "lg",
  limit: 10000,
  page: false,
  toolbar: "#column-toolbar",
  defaultToolbar: [],
});
table.on("toolbar(key-table)", function(obj) {
  if (obj.event === "add") {
    add();
  } else if (obj.event === "batchRemove") {
    batchRemove(obj);
  }
});
```

--------------------------------

### Layui Table Initialization and Data Rendering

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/table/view.html

Defines the 'render' function responsible for initializing and displaying the Layui data table. It configures the table with pagination, a custom toolbar, default tools (refresh, filter, print, exports), and a 'done' callback to enable image preview functionality.

```JavaScript
cols.push({ title: "操作", toolbar: "#table-bar", align: "center", width: 130 });
function render() {
  table.render({
    elem: "#data-table",
    url: SELECT_API,
    page: true,
    cols: [cols],
    skin: "line",
    size: "lg",
    toolbar: "#table-toolbar",
    autoSort: false,
    defaultToolbar: [
      {
        title: "刷新",
        layEvent: "refresh",
        icon: "layui-icon-refresh"
      },
      "filter",
      "print",
      "exports"
    ],
    done: function () {
      layer.photos({photos: 'div[lay-id="data-table"]', anim: 5});
    }
  });
}
```

--------------------------------

### Layui Table Configuration and Data Rendering

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/drawerFragment.html

Configures and renders a Layui data table for user management. Defines table columns including type, field, alignment, width, and custom templates. Specifies data source URL, pagination, skin, and toolbar options. Includes a `done` callback to dynamically render dropdown menus for each row.

```JavaScript
let cols = [
 [
 { type: 'checkbox' },
 { title: '账号', field: 'username', align: 'center', width: 100 },
 { title: '姓名', field: 'realName', align: 'center' },
 { title: '性别', field: 'sex', align: 'center', width: 80, templet: '#user-sex' },
 { title: '电话', field: 'phone', align: 'center' },
 { title: '启用', field: 'enable', align: 'center', templet: '#user-enable' },
 { title: '登录', field: 'login', align: 'center', templet: '#user-login' },
 { title: '注册', field: 'createTime', align: 'center', templet: '#user-createTime' },
 { title: '操作', toolbar: '#user-bar', align: 'left', width: 160, fixed: 'right' }
 ]
 ]
 table.render({
 elem: '#user-table',
 url: '../../demos/data/table.json',
 page: true,
 cols: cols,
 skin: 'line',
 toolbar: '#user-toolbar',
 defaultToolbar: [
 { layEvent: 'refresh', icon: 'layui-icon-refresh' },
 'filter',
 'print',
 'exports'
 ],
 done: function (res, curr, count) {
 for (var i = 0; i < res.data.length; i++) {
 dropdown.render({
 elem: '#more_' + res.data[i].userId,
 data: [
 { title: 'menu item11', id: 100 },
 { title: 'menu item22', id: 101 },
 { title: 'menu item33', id: 102 }
 ],
 id: '#more_' + res.data[i].userId,
 click: function (obj) {
 layer.tips('点击了：' + obj.title, this.elem, { tips: [1, '#5FB878'] })
 }
 });
 }
 }
 });
```

--------------------------------

### JavaScript: Initialize Menu Icon Picker

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/table/crud.html

This snippet initializes the Layui `iconPicker` module for selecting an icon for the menu item. It configures the picker to use font classes and disables pagination, showing all available icons at once.

```javascript
layui.use(["iconPicker"], function() {
  layui.iconPicker.render({
    elem: "#icon",
    type: "fontClass",
    page: false
  });
});
```

--------------------------------

### JavaScript: Initialize Parent Menu Selector with xmSelect

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/table/crud.html

This JavaScript snippet uses Layui's `xmSelect` module to create a hierarchical parent menu selection dropdown. It fetches menu data from a specified API endpoint, initializes the selector with existing values, and configures it for single selection with tree view and search capabilities.

```javascript
const CRUD_API = "/app/admin/table/crud";
layui.use(["jquery", "xmSelect", "popup"], function() {
  layui.$.ajax({
    url: "/app/admin/rule/select?format=tree&type=0,1",
    dataType: "json",
    success: function (res) {
      let value = layui.$("#pid").attr("value");
      let initValue = value ? value.split(",") : [];
      layui.xmSelect.render({
        el: "#pid",
        name: "pid",
        initValue: initValue,
        tips: "无",
        data: res.data,
        toolbar: {show: true, list: ["CLEAR"]},
        model: {"icon":"hidden","label":{"type":"text"}},
        clickClose: true,
        radio: true,
        tree: {show:true, strict:false, clickCheck:true, clickExpand:false},
      });
      if (res.code) {
        return layui.popup.failure(res.msg);
      }
    }
  });
});
```

--------------------------------

### Initialize Layui Key Table

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/table/create.html

This snippet initializes the 'key-table' using Layui's table module. It defines the table's columns (index name, fields, type) and sets up initial data with a default empty row, configuring the table for display without pagination.

```JavaScript
let table = layui.table;
let common = layui.common;
let cols = [
  { type: "checkbox", width: 52 },
  { title: "索引名称", field: "name", templet: "#key-name", width: 200 },
  { title: "索引字段", field: "columns", templet: "#key-columns", width: 200 },
  { title: "索引类型", field: "type", templet: "#key-type", width: 200 },
  { type: "space" }
];
window._key_id = 0;
let data = [{ _key_id: _key_id++, name : "", columns: "", type: "normal" }];
table.render({
  elem: "#key-table",
  cols: [cols],
  data: data,
  skin: "line",
  size: "lg",
  limit: 10000,
  page: false,
  toolbar: "#column-toolbar",
  defaultToolbar: []
});
```

--------------------------------

### HTML Buttons and Form Elements for User Actions

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/drawerFragment.html

HTML markup for various action buttons (Add, Delete, Edit, Remove, More) and a switch input for enabling/disabling users, all styled with Layui's 'pear-btn' classes. Includes Layui event attributes for interaction.

```HTML
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add"> <i class="layui-icon layui-icon-add-1"></i> 新增 </button> <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove"> <i class="layui-icon layui-icon-delete"></i> 删除 </button> <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button> <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button> <button class="pear-btn pear-btn-sm" id="more\_{{d.userId}}"><i class="layui-icon layui-icon-triangle-d"></i></button> <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked="{{ d.enable == 0 ? 'true' : 'false' }}">
```

--------------------------------

### Layui Module Loading and Core Variable Initialization

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/table/view.html

Loads essential Layui modules such as 'table', 'form', 'common', 'popup', and 'util'. It then initializes corresponding JavaScript variables for easy access to Layui functionalities and sets up arrays to manage API calls and their results.

```JavaScript
layui.use(["table", "form","common", "popup", "util"], function() {
  let table = layui.table;
  let form = layui.form;
  let $ = layui.$;
  let common = layui.common;
  let util = layui.util;
  let apis = [];
  let apiResults = {};
```

--------------------------------

### Open Layer for Adding Table Data

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/user/index.html

The `add` function opens a new layer (modal/popup) for adding new data. It configures the layer type, title, shade, and dynamic area based on device type, pointing to `INSERT_URL` for content.

```javascript
let add = function() { layer.open({ type: 2, title: "新增", shade: 0.1, area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"], content: INSERT_URL }); }
```

--------------------------------

### JavaScript: Configure Basic Site Information with Layui

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/config/index.html

This script handles the configuration of basic site information, including image upload functionality using Layui's upload module and form submission via AJAX. It allows users to select or upload a site logo and save general settings like website name and ICP/Public Security record numbers.

```javascript
// 基础设置 layui.use(["upload", "layer", "popup"], function() { let $ = layui.$; let form = layui.form; // image let input = $("#image").prev(); input.prev().attr("src", input.val()); layui.$("#attachment-choose-image").on("click", function() { parent.layer.open({ type: 2, title: "选择附件", content: "/app/admin/upload/attachment?ext=jpg,jpeg,png,gif,bmp", area: ["95%", "90%"], success: function (layero, index) { parent.layui.$("#layui-layer" + index).data("callback", function (data) { input.val(data.url).prev().attr("src", data.url); }); } }); }); layui.upload.render({ elem: "#image", url: "/app/admin/upload/avatar", acceptMime: "image/gif,image/jpeg,image/jpg,image/png", done: function (res) { if (res.code) { return layui.popup.failure(res.msg); } this.item.prev().val(res.data.url).prev().attr("src", res.data.url); } }); // 提交 form.on("submit(saveBaseInfo)", function(data){ $.ajax({ url: "/app/admin/config/update", dataType: "json", type: "POST", data: {logo: data.field}, success: function (res) { if (res.code) { return layui.popup.failure(res.msg); } return layui.popup.success("操作成功"); } }); return false; }); });
```

--------------------------------

### CSS Styling for Pear Buttons

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/drawerFragment.html

Defines CSS rules for custom 'pear-btn' elements, specifically for hover states and border transparency, enhancing the visual feedback of buttons.

```CSS
.expand.pear-btn:hover { color: currentColor; background-color: unset; } .expand.pear-btn { border: 1px solid rgb(255 255 255 / 0%) }
```

--------------------------------

### Layui Table Initialization and Operations for Column Settings

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/table/create.html

This JavaScript code initializes a Layui table to manage database table column definitions. It defines table columns, initial data, and handles toolbar events for adding and batch removing rows. It uses `layui.table` and `layui.popup` modules.

```JavaScript
const CREATE_API = "/app/admin/table/create"; // 字段设置 layui.use(["table", "common", "popup"], function () { let table = layui.table; let common = layui.common; let cols = [
 { type: "checkbox", width: 50,
 },
 { title: "字段名称", field: "field", templet: "#col-field", width: 182 },
 { title: "字段备注", field: "comment", templet: "#col-comment", width: 182 },
 { title: "长度/值", field: "length", templet: "#col-length", width: 182 },
 { title: "默认值", field: "default", templet: "#col-default", width: 182 },
 { title: "字段类型", field: "type", templet: "#col-type", width: 182 },
 { title: "主键", field: "primary_key", templet: "#col-primary_key", width: 50, align: "center", },
 { title: "自增", field: "auto_increment", templet: "#col-auto_increment", width: 50, align: "center", },
 { title: "为空", field: "nullable", templet: "#col-nullable", width: 50, align: "center", },
 { type: "space" }
 ];
 window._field_id = 0;
 let data = [{
 _field_id: _field_id++,
 field : "id",
 comment: "主键",
 length: 11,
 default: "",
 type: "integer",
 primary_key: true,
 auto_increment: true,
 nullable: false,
 },{
 _field_id: _field_id++,
 field : "created_at",
 comment: "创建时间",
 length: "",
 default: "",
 type: "dateTime",
 primary_key: false,
 auto_increment: false,
 nullable: true,
 },{
 _field_id: _field_id++,
 field : "updated_at",
 comment: "更新时间",
 length: "",
 default: "",
 type: "dateTime",
 primary_key: false,
 auto_increment: false,
 nullable: true,
 },{
 _field_id: _field_id++,
 field : "",
 comment: "",
 length: "",
 default: "",
 type: "integer",
 primary_key: false,
 auto_increment: false,
 nullable: true,
 }];
 table.render({
 elem: "#column-table",
 cols: [cols],
 data: data,
 cellMinWidth: 40,
 skin: "line",
 size: "lg",
 limit: 10000,
 page: false,
 toolbar: "#column-toolbar",
 defaultToolbar: [],
 });
 table.on("toolbar(column-table)", function(obj) {
 if (obj.event === "add") {
 add();
 } else if (obj.event === "batchRemove") {
 batchRemove(obj);
 }
 });
 let add = function() {
 syncTableData();
 let options = table.getData("column-table");
 options.push({
 _field_id: _field_id++,
 field : "",
 comment: "",
 length: "",
 default: "",
 type: "integer",
 primary_key: false,
 auto_increment: false,
 nullable: true,
 });
 table.reloadData("column-table", {data:options});
 }
 let batchRemove = function(obj) {
 var checkIds = common.checkField(obj,"_field_id");
 if (checkIds === "") return layui.popup.warning("未选中数据");
 let data = table.getData("column-table");
 let newData = [];
 let deleteIds = checkIds.split(",");
 layui.each(data, function (index, item) {
 if (deleteIds.indexOf(item._field_id + "") === -1) {
 newData.push(item);
 }
 });
 table.reloadData("column-table", {data: newData})
 } });
```

--------------------------------

### JavaScript: Configure Date and Datetime Pickers

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/user/update.html

Initializes date and datetime pickers for various fields using Layui's laydate module. It sets up a date-only picker for 'birthday' and datetime pickers for 'last_time' (login time) and 'join_time' (registration time) to ensure correct input format.

```JavaScript
// Field 生日 birthday
layui.use(["laydate"], function() {
  layui.laydate.render({
    elem: "#birthday"
  });
})
// Field 登录时间 last_time
layui.use(["laydate"], function() {
  layui.laydate.render({
    elem: "#last_time",
    type: "datetime"
  });
})
// Field 注册时间 join_time
layui.use(["laydate"], function() {
  layui.laydate.render({
    elem: "#join_time",
    type: "datetime"
  });
})
```

--------------------------------

### Initialize Permissions Field with xmSelect

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/role/update.html

Fetches available permission rules based on the current role's parent ID (res.data[0].pid, assumed to be available from a prior data fetch) and initializes the 'rules' multi-select field using `xmSelect`. It pre-selects existing permissions and configures the select box for tree view and toolbar options.

```JavaScript
layui.use(["jquery", "xmSelect", "popup"], function() {
  layui.$.ajax({
    url: "/app/admin/role/rules?id=" + res.data[0].pid, // 'res' is from the outer scope's SELECT_API call
    dataType: "json",
    success: function (res) {
      let value = layui.$("#rules").attr("value");
      let initValue = value ? value.split(",") : [];
      layui.xmSelect.render({
        el: "#rules",
        name: "rules",
        initValue: initValue,
        data: res.data,
        tree: {"show":true,expandedKeys:initValue},
        toolbar: {show:true,list:["ALL","CLEAR","REVERSE"]},
      })
      if (res.code) {
        layui.popup.failure(res.msg);
      }
    }
  });
});
```

--------------------------------

### Render Multi-Select Dropdowns for Key Columns

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/table/modify.html

The `keyColumnMultiSelectRender` function dynamically renders multi-select dropdowns using Layui's `xmSelect` component. It populates these dropdowns with field names from the 'column-table' data, allowing users to select multiple columns for key definitions. It iterates through elements with the class 'key-columns-div' to apply the `xmSelect` rendering.

```JavaScript
window.keyColumnMultiSelectRender = function () {
  layui.use(["jquery", "xmSelect", "table"], function () {
    let $ = layui.$;
    let table = layui.table;
    let columnData = table.getData("column-table");
    let data = [];
    layui.each(columnData, function (i, item) {
      if (item.field) {
        data.push({ name: item.field, value:item.field });
      }
    });
    layui.each($(".key-columns-div"), function (_, dom) {
      let name = $(dom).attr("name");
      let value = $(dom).attr("value");
      let initValue = value ? value.split(",") : [];
      layui.xmSelect.render({
        el: dom,
        name: name,
        initValue: initValue,
        data: data,
      })
    });
  });
}
```

--------------------------------

### Layui Module Initialization and Dynamic Form Toggle Function

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/document/drawerFragment.html

Initializes essential Layui modules (table, form, jquery, drawer, dropdown) and defines a `formToggle` function. This function dynamically hides/shows form elements based on a 'min' display count, providing an expand/collapse feature for forms.

```JavaScript
layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown'], function () { let table = layui.table; let form = layui.form; let $ = layui.jquery; let drawer = layui.drawer; let dropdown = layui.dropdown; let MODULE_PATH = "/system/user/"; formToggle({ elem: "#userForm", }); function formToggle(options) { var defaultsOpt = { isExpand: false, prefixIcon: "layui-icon", toggleIcon: ['layui-icon-down', 'layui-icon-up'], toggleText: ['展开', '折叠'], } var opt = $.extend({}, defaultsOpt, options); var elem = opt.elem; // 绑定的表单元素,必填 var min = opt.min; // 最小显示数,默认显示一行 var isExpand = opt.isExpand; // 初始展开 var prefixIcon = opt.prefixIcon + " "; // 图标前缀 var toggleIcon = opt.toggleIcon; // 折叠和展开时的图标类[unExpandIcon, ExpandIcon] var toggleText = opt.toggleText; // 折叠和展开时的文本 var eleDOM = $(elem + " .layui-inline"); var firstElTop = eleDOM.first().offset().top; var targetEl = eleDOM.filter(function (index) { var isGtMin = (index + 1) > min; var isGtFirstElTop = $(this).offset().top > firstElTop; var isNeqLast = (index + 1) != eleDOM.length; return min ? isGtMin && isNeqLast : isGtFirstElTop && isNeqLast; }); var unExpandIcon = prefixIcon + toggleIcon[0]; var expandIcon = prefixIcon + toggleIcon[1]; var unExpandText = toggleText[0]; var expandText = toggleText[1]; var btnSelector = elem + " .expand"; $(btnSelector).append("<i></i>") if (isExpand) { $(btnSelector).prepend("<span>" + expandText + "</span>"); $(btnSelector + ">i").addClass(expandIcon); } else { $(btnSelector).prepend("<span>" + unExpandText + "</span>") $(btnSelector + ">i").addClass(unExpandIcon) targetEl.addClass("layui-hide"); } $(btnSelector).click(function () { isExpand = !isExpand; if (isExpand) { $(btnSelector + ">span").html(expandText); $(btnSelector + ">i").removeClass(unExpandIcon).addClass(expandIcon); targetEl.removeClass("layui-hide") } else { $(btnSelector + ">span").html(unExpandText); $(btnSelector + ">i").removeClass(expandIcon).addClass(unExpandIcon); targetEl.addClass("layui-hide") } }) }
```

--------------------------------

### Layui Table Column Rendering for Icon and Upload Controls

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/table/view.html

Provides custom column rendering templates for 'iconpicker', 'upload', and 'uploadimage' control types. For icons, it displays the icon directly. For uploads, it creates clickable links, and for image uploads, it generates image previews.

```JavaScript
else if (control === "iconpicker") {
  schema.templet = function (d) {
    return '<i class="layui-icon ' + util.escape(d[field]) + '"></i>';
  };
} else if (control === "upload") {
  schema.templet = function (d) {
    return '<a href="' + encodeURI(d[field]) + '" target="_blank">' + util.escape(d[field]) + '</a>';
  };
} else if (control === "uploadimage") {
  schema.templet = function (d) {
    if (!d[field]) return "";
    let images = d[field].split(",");
    let imagesHtml = '';
    for (let i in images) {
      imagesHtml += '<img src="'+encodeURI(images[i])+'" style="max-width:32px;max-height:32px;" />';
    }
    return imagesHtml;
  };
}
```

--------------------------------

### Layui Application for Dynamic Table Schema Management

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/table/modify.html

This comprehensive JavaScript code block, utilizing the Layui framework, manages the dynamic configuration of database tables. It fetches table schema data via AJAX, populates form fields, initializes and renders multiple Layui tables for columns, forms, and indexes, and provides functionalities for adding and removing table fields.

```JavaScript
const MODIFY_API = "/app/admin/table/modify";
const SCHEMA_API = "/app/admin/table/schema";
const TABLE_NAME = "<?=htmlspecialchars($table)?>";
layui.use(["popup"], function () {
  let $ = layui.$;
  $.ajax({
    url: SCHEMA_API + "?table=" + TABLE_NAME,
    dataType: "json",
    success: function (res) {
      if (res.code) {
        return layui.popup.failure(res.msg);
      }
      // 表信息
      $('input[name="table"]').val(res.data.table.name);
      $('input[name="table_comment"]').val(res.data.table.comment);
      // 字段 表单 索引信息
      let columnsData = res.data.columns;
      let formsData = res.data.forms;
      let keysData = res.data.keys;
      window._field_id = 0;
      layui.each(columnsData, function (index, item) {
        columnsData[index]._field_id = _field_id;
        columnsData[index].old_field = item.field;
        columnsData[index].default = item.default === "" ? "''" : item.default;
        formsData[index]._field_id = _field_id;
        _field_id++;
      });
      if (keysData.length === 0) {
        keysData.push({
          name : "",
          columns: "",
          type: "normal"
        });
      }
      window._key_id = 0;
      layui.each(keysData, function (index, item) {
        keysData[index]._key_id = _key_id;
        _key_id ++;
      });
      // 字段设置
      layui.use(["table", "common", "popup"], function () {
        let table = layui.table;
        let common = layui.common;
        let cols = [
          { type: "checkbox", width: 50, },
          { title: "字段名称", field: "field", templet: "#col-field", width: 182 },
          { title: "字段备注", field: "comment", templet: "#col-comment", width: 182 },
          { title: "长度/值", field: "length", templet: "#col-length", width: 182 },
          { title: "默认值", field: "default", templet: "#col-default", width: 182 },
          { title: "字段类型", field: "type", templet: "#col-type", width: 182 },
          { title: "主键", field: "primary_key", templet: "#col-primary_key", width: 50, align: "center", },
          { title: "自增", field: "auto_increment", templet: "#col-auto_increment", width: 50, align: "center", },
          { title: "为空", field: "nullable", templet: "#col-nullable", width: 50, align: "center", },
          { type: "space" }
        ];
        table.render({
          elem: "#column-table",
          cols: [cols],
          data: columnsData,
          cellMinWidth: 10,
          skin: "line",
          size: "lg",
          limit: 10000,
          page: false,
          toolbar: "#column-toolbar",
          defaultToolbar: [],
        });
        table.on("toolbar(column-table)", function(obj) {
          if (obj.event === "add") {
            add();
          } else if (obj.event === "batchRemove") {
            batchRemove(obj);
          }
        });
        let add = function() {
          syncTableData();
          let options = table.getData("column-table");
          options.push({
            _field_id: _field_id++,
            field : "",
            comment: "",
            length: "",
            default: "",
            type: "integer",
            primary_key: false,
            auto_increment: false,
            nullable: true,
          });
          table.reloadData("column-table", {data:options});
        }
        let batchRemove = function(obj) {
          let checkIds = common.checkField(obj,"_field_id");
          if (checkIds === "") return layui.popup.warning("未选中数据");
          let data = table.getData("column-table");
          let newData = [];
          let deleteIds = checkIds.split(",");
          layui.each(data, function (index, item) {
            if (deleteIds.indexOf(item._field_id + "") === -1) {
              newData.push(item);
            }
          });
          table.reloadData("column-table", {data: newData})
          syncTableData()
        }
      });
      // 表单设置
      layui.use(["table", "common", "element"], function () {
        let table = layui.table;
        layui.element.on("tab(create-table-tab)", function(){
          syncTableData();
        });
        let cols = [
          { title: "字段名称", field: "field", templet: "#form-field", width: 180 },
          { title: "字段备注", field: "comment", templet: "#form-comment", width: 180 },
          { title: "控件类型", field: "control", templet: "#form-control", width: 180 },
          { title: "控件参数", field: "control_args", templet: "#form-control_args", width: 180 },
          { title: "表单显示", field: "form_show", templet: "#form-form_show", width: 67, align: "center", },
          { title: "列表显示", field: "list_show", templet: "#form-list_show", width: 67, align: "center", },
          { title: "支持排序", field: "enable_sort", templet: "#form-enable_sort", width: 67, align: "center", },
          { title: "支持查询", field: "searchable", templet: "#form-searchable", width: 67, align: "center", },
          { title: "查询类型", field: "search_type", templet: "#form-search_type", width: 130, },
          { type: "space" }
        ];
        table.render({
          elem: "#form-table",
          cols: [cols],
          data: formsData,
          cellMinWidth: 40,
          skin: "line",
          size: "lg",
          limit: 10000,
          page: false,
          defaultToolbar: [],
        });
      });
      // 索引设置
      layui.use(["table", "common", "xmSelect", "popup"], function () {
        let table = layui.table;
        let common = layui.common;
        let cols = [
          { type: "checkbox", width: 52, },
          { title: "索引名称", field: "name", templet: "#key-name", width: 200, },
          { title: "索引字段", field: "columns", templet: "#key-columns"
```

--------------------------------

### JavaScript: Initialize Gender Selection with xmSelect

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/user/update.html

Initializes the 'sex' field using Layui's xmSelect component. It fetches gender options from a dedicated dictionary API endpoint and pre-selects the existing user's gender. The xmSelect component is configured for single-choice radio selection with hidden icons.

```JavaScript
// Field 性别 sex
layui.use(["jquery", "xmSelect", "popup"], function() {
  layui.$.ajax({
    url: "/app/admin/dict/get/sex",
    dataType: "json",
    success: function (res) {
      let value = layui.$("#sex").attr("value");
      let initValue = value ? value.split(",") : [];
      layui.xmSelect.render({
        el: "#sex",
        name: "sex",
        initValue: initValue,
        data: res.data,
        model: {"icon":"hidden","label":{"type":"text"}},
        clickClose: true,
        radio: true,
      });
      if (res.code) {
        layui.popup.failure(res.msg);
      }
    }
  });
});
```

--------------------------------

### Open Layer for Adding New Record

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/table/view.html

Opens a new Layer popup for adding a new record. The popup's size is responsive based on whether the device is mobile, and its content is loaded from the `INSERT_URL`.

```javascript
window.add = function() {
    layer.open({
        type: 2,
        title: "新增",
        shade: 0.1,
        area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"],
        content: INSERT_URL
    });
}
```

--------------------------------

### Initialize Layui xmSelect Multi-Select

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/table/create.html

This snippet iterates through elements with the class 'key-columns-div' and initializes a Layui xmSelect multi-select component for each. It retrieves the name and initial value from the DOM element attributes and renders the select box with provided data, enabling dynamic multi-selection.

```JavaScript
layui.each($(".key-columns-div"), function (_, dom) { let name = $(dom).attr("name"); let value = $(dom).attr("value"); let initValue = value ? value.split(",") : []; layui.xmSelect.render({ el: dom, name: name, initValue: initValue, data: data, }) });
```

--------------------------------

### Handle Table Toolbar Events (Add/Refresh/Batch Remove)

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/app/view/user/index.html

This snippet listens for events triggered from the table's top toolbar. It calls `add()`, `refreshTable()`, or `batchRemove(obj)` based on the specific toolbar action.

```javascript
table.on("toolbar(data-table)", function(obj) { if (obj.event === "add") { add(); } else if (obj.event === "refresh") { refreshTable(); } else if (obj.event === "batchRemove") { batchRemove(obj); } });
```

--------------------------------

### ECharts Option Configuration and Responsive Resize

Source: https://github.com/webman-php/admin/blob/main/src/plugin/admin/public/demos/console/console2.html

This JavaScript code snippet configures an ECharts chart with specific visual options, including shadow effects and data. It also sets up a 'window.onresize' event listener to ensure the chart resizes correctly when the browser window dimensions change, maintaining responsiveness.

```JavaScript
[1\], 0.1) } \], false ), shadowColor: hexToRgba(color\[1\], 0.1), shadowBlur: 10 } }, data: yAxisData2 }] }; echartsRecords.setOption(option); window.onresize = function() { echartsRecords.resize(); } });
```