EasyUI知识点

1. easyUI实现动态列，js实现

$('#dg').datagrid({
            height: 340,
            url: '${path}/salary/datas.do',
            method: 'POST',
            //queryParams: { 'id': id },
            //idField: '产品ID',
            striped: true,
            fitColumns: true,
            //singleSelect: false,
            rownumbers: true,
            pagination: true,
            nowrap: false,
            pageSize: 10,
            pageList: [10, 20, 50, 100, 150, 200],
            showFooter: true,
            columns: [[
                { field: 'staffId', title: 'ID', width: 80, align: 'left' },
                { field: 'name', title: '员工姓名', width: 80, align: 'left' },
                { field: 'beginDate', title: '开始日期', width: 80, align: 'left' },
                { field: 'endDate', title: '结束日期', width: 80, align: 'left' },
                { field: 'preSalary', title: '预发工资', width: 80, align: 'left' },
                { field: 'socialInsurance', title: '社会保险', width: 80, align: 'left' },
                { field: 'realSalary', title: '实发工资', width: 80, align: 'left' }
            ]],
            onBeforeLoad: function (param) {
            },
            onLoadSuccess: function (data) {
            },
            onLoadError: function () {
            },
            onClickCell: function (rowIndex, field, value) {
                //alert(field);
            }
        });
 

2. 实现表格字段数据格式化

<table id="dg" class="easyui-datagrid" title="Basic DataGrid" style="display:none;width:700px;height:250px"
            data-options="singleSelect:true,collapsible:true,url:'${path}/staff/datas.do',method:'post'"
            pagination="true">
        <thead>
            <tr>
                <th data-options="field:'id',width:80,hidden:true">Item ID</th>
                <th data-options="field:'staffNo',width:80">员工编号</th>
                <th data-options="field:'name',width:80">姓名</th>
                <th data-options="field:'gender',width:80,formatter:function(v){return '1'==v ? '男':'女';}">性别</th>
                <th data-options="field:'age',width:80">年龄</th>
                <th data-options="field:'joinDate',width:80">入职日期</th>
                <th data-options="field:'degree',width:80,formatter:function(v,row,idx){return '0'==v ? '博士' : '1'==v ? '研究生' : '2'==v ? '本科' : '3'==v ? '大专' : '中专';}">学历</th>
                <th data-options="field:'status',width:80,formatter:function(value,row,index){return '0' == value ? '正式员工' : '1' == value ? '已离职' : '试用';}">状态</th>
            </tr>
        </thead>
    </table>