layui实现可编辑课表

要在layui中实现可编辑的课程表，可以考虑使用laytable组件和laytpl模板引擎。

首先，准备好一个包含所有课程数据的JSON对象，例如：

var courseData = [
  {"day": "周一", "time": "第一节", "course": "语文", "teacher": "张三"},
  {"day": "周一", "time": "第二节", "course": "数学", "teacher": "李四"},
  {"day": "周一", "time": "第三节", "course": "英语", "teacher": "王五"},
  {"day": "周二", "time": "第一节", "course": "物理", "teacher": "赵六"},
  {"day": "周二", "time": "第二节", "course": "化学", "teacher": "钱七"},
  {"day": "周二", "time": "第三节", "course": "生物", "teacher": "孙八"}
];

接下来，使用laytable组件创建一个表格，并将课程数据渲染到表格中。在表格中添加“编辑”按钮，点击按钮后弹出一个弹窗，可以编辑当前行的课程信息。代码如下：

// 渲染表格
layui.use(['table', 'layer'], function(){
  var table = layui.table;
  var layer = layui.layer;

  table.render({
    elem: '#courseTable',
    cols: [[
      {field: 'day', title: '星期'},
      {field: 'time', title: '时间'},
      {field: 'course', title: '课程'},
      {field: 'teacher', title: '老师'},
      {title: '操作', toolbar: '#toolbar', width: 80}
    ]],
    data: courseData
  });

  // 监听表格中的“编辑”按钮
  table.on('tool(courseTable)', function(obj){
    var data = obj.data;
    if(obj.event === 'edit'){
      // 弹出编辑弹窗
      layer.open({
        type: 1,
        area: ['400px', '300px'],
        title: '编辑课程',
        content: $('#editLayer').html(),
        success: function(layero, index){
          // 将当前行的数据填充到表单中
          layero.find('input[name="day"]').val(data.day);
          layero.find('input[name="time"]').val(data.time);
          layero.find('input[name="course"]').val(data.course);
          layero.find('input[name="teacher"]').val(data.teacher);

          // 监听表单提交事件，更新当前行的数据
          layero.find('form').submit(function(){
            data.day = layero.find('input[name="day"]').val();
            data.time = layero.find('input[name="time"]').val();
            data.course = layero.find('input[name="course"]').val();
            data.teacher = layero.find('input[name="teacher"]').val();
            table.reload('courseTable', {data: courseData});
            layer.close(index);
            return false;
          });
        }
      });
    }
  });
});

最后，在HTML文件中添加一个包含表格和编辑弹窗模板的代码即可。

<!-- 表格 -->
<table class="layui-hide" id="courseTable" lay-filter="courseTable"></table>

<!-- 编辑弹窗模板 -->
<script type="text/html" id="editLayer">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">星期</label>
      <div class="layui-input-block">
        <input type="text" name="day" required lay-verify="required" placeholder="请输入星期" autocomplete="off" 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="time" required lay-verify="required" placeholder="请输入时间" autocomplete="off" 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="course" required lay-verify="required" placeholder="请输入课程名称" autocomplete="off" 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="teacher" required lay-verify="required" placeholder="请输入老师姓名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="editCourse">提交</button>
      </div>
    </div>
  </form>
</script>