JQuery看板新增项配置及taskName加载显示异常技术咨询

我来帮你一步步解决这两个核心问题：看板项无法展示任务名称，以及实现添加新看板项的功能。

一、修复任务名称不显示的问题 #

任务名称没正常展示，大概率是看板项模板未正确绑定taskName字段，或是数据源配置存在疏漏。下面是具体的排查和解决步骤：

1. 确认返回的JSON数据格式 #

先检查Ajax请求返回的JSON是否符合预期，必须是包含taskId和taskName的数组，示例如下：

[
  {"taskId": "TASK-001", "taskName": "完成用户登录功能"},
  {"taskId": "TASK-002", "taskName": "优化页面加载速度"}
]

你可以在浏览器控制台的Network标签里查看请求响应，确保字段名和代码中使用的完全一致（注意大小写，比如别把taskName写成taskname）。

2. 配置看板项的渲染模板 #

不管你用的是哪款jQuery看板组件，核心是要定义模板，明确指定taskId和taskName的展示位置。以常见的Kendo UI看板为例，模板定义如下：

<!-- 看板项模板 -->
<script id="task-item-template" type="text/x-kendo-template">
  <div class="task-top">#= taskId #</div>
  <div class="task-bottom">#= taskName #</div>
</script>

初始化看板时绑定这个模板：

$("#kanban").kendoKanban({
  dataSource: dataSource,
  columns: [
    { field: "status", title: "待处理" },
    { field: "status", title: "进行中" }
  ],
  itemTemplate: $("#task-item-template").html() // 关联模板
});

如果是其他看板组件，逻辑通用——找到组件的模板配置项，将taskName插入到对应位置即可。

3. 确保数据源正确加载数据 #

你的Ajax请求要确保成功把返回的JSON赋值给看板数据源，示例代码：

// 初始化看板数据源
var dataSource = new kendo.data.DataSource({
  schema: {
    model: {
      fields: {
        taskId: { type: "string" },
        taskName: { type: "string" },
        status: { type: "string" } // 看板列对应的状态字段，按需调整
      }
    }
  }
});

// Ajax获取任务数据并加载到数据源
$.ajax({
  url: "/Task/viewTask",
  type: "GET",
  dataType: "json",
  success: function(response) {
    dataSource.data(response); // 将返回的JSON数组设为数据源的本地数据
  },
  error: function(xhr, err) {
    console.log("加载任务数据失败:", err);
  }
});

二、实现添加新看板项的功能 #

要添加带taskId和taskName的新项，需要一个输入表单，同时结合Ajax将新任务同步到数据库和看板：

1. 添加入户表单 #

在页面中添加简单的输入表单：

<div class="add-task-box">
  <input type="text" id="new-task-id" placeholder="输入任务ID" />
  <input type="text" id="new-task-name" placeholder="输入任务名称" />
  <button id="add-task-btn">添加新任务</button>
</div>

2. 绑定添加事件 #

给按钮绑定点击事件，获取输入值、添加到看板，同时提交到后端保存：

$("#add-task-btn").click(function() {
  // 获取输入值并做简单验证
  var taskId = $("#new-task-id").val().trim();
  var taskName = $("#new-task-name").val().trim();
  
  if (!taskId || !taskName) {
    alert("请填写完整的任务ID和名称！");
    return;
  }

  // 创建新任务对象（需包含看板列所需的状态字段）
  var newTask = {
    taskId: taskId,
    taskName: taskName,
    status: "待处理" // 新任务默认进入的列，按需调整
  };

  // 先添加到看板数据源，让页面实时更新
  dataSource.add(newTask);

  // 发送Ajax请求保存到数据库
  $.ajax({
    url: "/Task/addTask",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify(newTask),
    success: function(res) {
      console.log("任务添加成功！");
      // 清空输入框
      $("#new-task-id").val("");
      $("#new-task-name").val("");
    },
    error: function(xhr, err) {
      console.log("保存任务失败:", err);
      // 保存失败时，从看板移除刚才添加的项
      dataSource.remove(newTask);
      alert("添加任务失败，请重试！");
    }
  });
});

额外注意事项 #

• 如果你用的不是Kendo UI看板，只需将组件API替换为你使用的库即可，核心逻辑（模板绑定、数据源操作）通用。
• 确保后端的/Task/addTask接口能正确接收JSON格式的请求参数，并返回成功响应。

内容的提问来源于stack exchange，提问作者Nilusha Kumarasiri