用dhtmlx实现一个编码管理页面

编码管理页面可以用dhtmlx的Grid组件来实现。以下是实现步骤：

1. 引入dhtmlx库文件和样式文件：

<link rel="stylesheet" type="text/css" href="dhtmlx/dhtmlx.css">
<script src="dhtmlx/dhtmlx.js"></script>

2. 创建Grid组件：

var myGrid = new dhtmlXGridObject("gridbox");
myGrid.setImagePath("dhtmlx/imgs/"); // 设置图标路径
myGrid.setHeader(["编码", "名称", "描述"]); // 设置表头
myGrid.setInitWidths("150,150,*"); // 设置列宽
myGrid.setColAlign("left,left,left"); // 设置列对齐方式
myGrid.setColTypes("ro,ed,ed"); // 设置列类型，第一列只读，后两列可编辑
myGrid.init(); // 初始化Grid

3. 加载数据：

myGrid.load("data.php"); // 加载数据，data.php返回json格式的数据

4. 添加工具栏：

var myToolbar = new dhtmlXToolbarObject("toolbar");
myToolbar.setIconsPath("dhtmlx/imgs/"); // 设置图标路径
myToolbar.addButton("add", 1, "添加", "add.png", "add_dis.png"); // 添加“添加”按钮
myToolbar.addButton("delete", 2, "删除", "delete.png", "delete_dis.png"); // 添加“删除”按钮
myToolbar.attachEvent("onClick", function(id) { // 绑定事件
    if (id == "add") {
        myGrid.addRow(myGrid.uid(), ["", "", ""]); // 添加一行
    } else if (id == "delete") {
        var id = myGrid.getSelectedRowId(); // 获取选中行的id
        if (id) {
            myGrid.deleteRow(id); // 删除选中行
        }
    }
});

5. 添加数据保存功能：

myGrid.attachEvent("onCellChanged", function(id, index, value) { // 绑定单元格编辑事件
    var data = {
        "id": id,
        "index": index,
        "value": value
    };
    dhtmlxAjax.post("save.php", data, function(loader) { // 发送数据保存请求
        var response = loader.xmlDoc.responseText;
        if (response != "OK") {
            alert("保存失败！");
        }
    });
    return true;
});

6. 编写数据保存接口：

<?php
$id = $_POST["id"];
$index = $_POST["index"];
$value = $_POST["value"];

// TODO: 将数据保存到数据库中

echo "OK";
?>

7. 编写数据加载接口：

<?php
$data = array(
    array("1", "编码1", "描述1"),
    array("2", "编码2", "描述2"),
    array("3", "编码3", "描述3")
);

echo json_encode($data); // 返回json格式的数据
?>

至此，一个简单的编码管理页面就完成了。