EasyUI_easyui html.easyui()-CSDN博客

本文链接：https://blog.csdn.net/qq_45260619/article/details/104208941

一些小的注意点：

当我们想要使用datagrid(数据表格引入数据时)：
加入数据格式是下列这样：

{
  "name": "张三",
  "date": "2020-10-01",
  "email": "zhangsan@qq.com",
  "department": {
    "id": 1,
    "name": "技术部"
  },
  "state": true
}

我们要引用department（部门）里边的name（名字），需要使用单元格formatter(格式化器)函数。
department是一个对象，包含了id和name，要获取name，就需要使用formatter先格式化。
formatter自带了三个参数，其中row就是记录的数据
下面是引入数据的格式:
使用传入的row，来获取部门的姓名，直接返回，即可显示到页面中

{field:'department',title:'部门',width:200,align:'right',formatter: function(value,row,index){
        return row.department.name;
    }}

数据表格，datagrid：

行填充 fit:true 列填充：fitColumns：true

在页面最开始的时候可以使用layout布局，比较方便
我们若是想要实现，点击tree，可以弹出一个tabs(选项卡)，那我们在监听tree的onclick时间的时候，需要注意，要添加if语句进行判断当前点击的页面是否存在，若存在，直接选择，不存在的话，再添加。

$('#tree').tree({
    url:'tree.json',
    onClick: function(node){

        var exist = $("#tabs").tabs('exists',node.text);
        if(exist){

            $("#tabs").tabs('select',node.text);

        }else{
            $("#tabs").tabs('add',{
                title:node.text,
                closable:true,
                content:"<iframe src="+node.attributes.url+" style='width:100%;height:100%'></iframe>"
            })
        }

    }
});

我们再引入其他html页面的时候，一般在Content中使用<iframe>标签引入，而不直接使用<href>标签来引入，因为href标签没有办法引入html页面的css央视。

content:"<iframe src="+node.attributes.url+" style='width:100%;height:100%'></iframe>"

tree.json
attributes属性：被添加到节点的自定义属性。

[
  {"id":1,
  "text":"系统菜单",
  "iconCls":"icon-text",
    "children": [{
      "text": "员工管理",
      "attributes": {
        "url": "employee.html"
      }
    },{
      "text": "用户管理",
      "attributes": {
        "url": "department.html"
      }
    }
    ]

}
]

让下拉框高度自动适应：
使用 panelHeight:‘auto’

/*部门 下拉框*/
$("#department").combobox({
    url:'department.json',
    width:160,
    panelHeight:'auto',
    valueField:'id',
    textField:'name'
});

提交表单
$.messager.alert:数据保存后弹出的提示，比alert好看
data = $.parseJSON(data):将返回的数据解析成JSON数据
$("#dg").datagrid('reload')
("#dialog").dialog('close'):
在保存数据之后，关闭dialog窗口，并重新加载datagrid数据表格。

handler:function(){
    /*提交表单*/
    $('#myform').form('submit', {
        url:'save.json',
        success:function(data){
            console.log(data)
            /*解析成JSON格式*/
            data = $.parseJSON(data);
            console.log(data)
            if(data.success){
                $.messager.alert('温馨提示',data.msg);
                $("#dg").datagrid('reload')
                $("#dialog").dialog('close')
            }else{
                $.messager.alert('温馨提示','保存失败')
            }

        }
    });
}

点击编辑按钮，可以数据回显

当我们保存，编辑等多处用到dialog窗口时，我们就可以把dialog写在外边，设置一个属性，closed:true，在需要用dialog的时候，$("#dialog").dialog(“open”)打开即可。

$("#dg").datagrid("getSelected")：可以用于获取鼠标选中的行的数据

可以使用$("#myform").form("load",rowData),当form表单name和得到的数据中的name相同时，即可自动加载数据。

如果我们获得的数据是一个对象，我们可以把这个对象里我们需要的值赋给一个name，将这个name保持与form表单的name相同，即可加载。

获取的数据始boolean类型的话，在后边拼接上字符串，转换为字符串类型，才可以被识别。

/*编辑*/
$("#edit").click(function () {

    /*获取选中的行，获取数据，放在rowData中*/
    var rowData = $("#dg").datagrid("getSelected");

    if(rowData==null){
        $.messager.alert("温馨提示","请选择一行数据进行编辑");
        return ;
    }

    $("#dialog").dialog("open");

    /*因为department是一个对象，所以没有department.id的数据，给department.id赋值*/
    rowData["department.id"]=rowData["department"].id;

    /*state为boolean类型，需要转换为字符串类型，才可以自动识别，并数据回显*/
    rowData["state"]=rowData["state"]+"";
    /*数据回显  ：  根据同名匹配，让表单自动加载数据*/
    $("#myform").form("load",rowData);
})

我们的编辑和保存使用的是一个dialog，所以在点击保存的时候显示编辑的按钮，我们需要吧数据清空
注意：清空数据要清空form表单的数据，不是清空dialog的数据，否则dialog里边会变成空白

$("#add").click(function () {
    $("#myform").form("clear")
    $("#dialog").dialog("open");
})

编辑和保存提交表单的url地址不同，所以需要区分，可以在数据表格获取的数据中多加一行数据id，在form表单中添加一个<input type="hidden" name="id">，我们就可以根据id是否为null来区分编辑和保存
id为空则是保存
id不为空则是编辑，因为编辑的时候需要数据回显，这时候就可以取出数据表格中隐藏的值id

使用 $("[name='id']").val()，来获取name为id的属性的值

/*区分编辑和保存提交的url*/

var id = $("[name='id']").val();
var url;
if(id){
    /*如果id有值的话，是编辑操作*/
    url='update.json';
}else {
    /*如果id为空，是保存操作 */
    url='save.json';
}
/*提交表单*/
$('#myform').form('submit', {
    url:url
    }