easyUI的datagrid表格的使用

实现easyUI表格的里面数据的增删改查功能。SQL使用Oracle和mybatis。

话不多说，直接上代码。

首先是前段部分的。

var session = GetSession();
    var pageIndex_b = 1;
    var pageSize_b = 10;
    var dataTotal = 0;
    var changeTable = '';

    var allSelected = {};
    allSelected.NAME = '全部';
    allSelected.CODE = '';

    //故障监控列表
    this.change = $('#faultDataGrid').datagrid({
        columns: [[
            {field:'place',title:'a',width:150,align:'center'},
            {field:'complaintValue',title:'aa',width:150,align:'center',editor:{type:'numberbox',options:{required:true,missingMessage:"请输入aa"}}},
            {field:'complaintComplete',title:'aaa',width:150,align:'center',editor:{type:'numberbox',options:{required:true,missingMessage:"请输入aaa"}}},
            {field: 'edit', title: '操作', width: 150, align: 'center',sortable:true,

                formatter:function(value,row,index){
                    var s = '<a href="#" onClick="saverow(this)">保存</a> ';
                    var c = '<a href="#" onClick="cancelrow(this)">取消</a>';
                    var e = '<a href="#" onClick="editrow(this)">编辑</a> ';
                    return e+s+c;
                }
            }
        ]],
        url:null,
        fitColumns:true,
        singleSelect:true,
        rownumbers:true,
        scrollbarSize:0,
        pagination: true,//分页控件
        pageSize: 10,//每页显示的记录条数，默认为10
        pageList: [10,20,30],
        onBeforeEdit:function(index,row){
            row.editing = true;
            updateActions(index);
        },
        onAfterEdit:function(index,row){
            row.editing = false;
            updateActions(index,row);
        },
        onCancelEdit:function(index,row){
            row.editing = false;
            updateActions(index);
        }
    });
    $('#faultDataGrid').datagrid('getPager').pagination({
        displayMsg:'当前显示从 {from} 到 {to}， 共{total}条记录',
        onSelectPage : function(pPageIndex, pPageSize) {
            pageIndex_b = pPageIndex;
            pageSize_b = pPageSize;
            loadData();
        }
    });
    // loadData();
    $(function () {
        $('#loadingText').html("数据加载中....");
        $('#loading').css('display','block');
        $("#feedBack").hide();
        try{
            var pageForm = {};
            pageForm.pageIndex = pageIndex_b;
            pageForm.pageSize = pageSize_b;
            //报表类型
            // var orderList=invokeRemoteSync("networkElementAction","queryTotalSetting",{pageForm:pageForm});

            var orderList=invokeRemoteSync("configurateFunctionAction","queryData",{pageForm:pageForm});
            dataTotal = orderList.totalRecords;
            var obj = {'total':dataTotal,'rows':orderList.resultList};
            $("#faultDataGrid").datagrid('loadData',obj);
        }catch(e){
            throw new Error(e);
            closes();
            alert("查询错误!");
        }finally{
            $('#loading').css('display','none');
        }
    })
   /* //查询数据
    function loadData() {
        $('#loadingText').html("数据加载中....");
        $('#loading').css('display','block');
        $("#feedBack").hide();
        try{
            var pageForm = {};
            pageForm.pageIndex = pageIndex_b;
            pageForm.pageSize = pageSize_b;

           // var orderList=invokeRemoteSync("networkElementAction","queryTotalSetting",{pageForm:pageForm});

            var orderList=invokeRemoteSync("configurateFunctionAction","queryData",{pageForm:pageForm});
            dataTotal = orderList.totalRecords;
            var obj = {'total':dataTotal,'rows':orderList.resultList};
            $("#faultDataGrid").datagrid('loadData',obj);
        }catch(e){
            throw new Error(e);
            closes();
            alert("查询错误!");
        }finally{
            $('#loading').css('display','none');
        }
    }*/

    //保存修改信息
    function listSave(row) {

        var changeNum = {};
        changeNum.id = row.id;
        changeNum.place = row.place;
        changeNum.complaintValue = row.complaintValue;
        changeNum.complaintComplete  = row.complaintComplete;

        var msgHisListNew=invokeRemoteSync("configurateFunctionAction","updateData",{changeNum:changeNum});
        //$("#personList").datagrid('loadData',msgHisListNew);
        $.messager.alert("结果","修改成功！",'info');
        loadData();
    }

    //保存
    function saverow(target){
        $('#faultDataGrid').datagrid('endEdit', getRowIndex(target));
    }
    //取消操作
    function cancelrow(target){
        $('#faultDataGrid').datagrid('cancelEdit', getRowIndex(target));
        //初始化
        doInitData();
    }

    //改变事件
    function updateActions(index,row){
        $('#faultDataGrid').datagrid('updateRow',{
            index: index,
            row:{}
        });
        if(row!=""&&row!=undefined&&row!=null){
            //row当前行的数据--调用接口传递数据
            listSave(row);
        }
    }

    //获取行
    function getRowIndex(target){
        var tr = $(target).closest('tr.datagrid-row');
        return parseInt(tr.attr('datagrid-row-index'));
    }
    //编辑行
    function editrow(target){
        $('#faultDataGrid').datagrid('beginEdit', getRowIndex(target));
    }

    // 清空选择列表
    function resetSearch() {
        $("#faultType").combobox("setValue",'');
    }

然后是后端部分的代码，对表格里面的数据进行操作。

查询数据

    @Override
    public Map queryData(Map<String, Object> paramMap) {
        String sql = "select cf.PLACE as place,cf.CPT_VALUE as complaintValue,cf.CPT_COMPLETE as complaintComplete from cfgr_function cf";
        Map pageForm = (Map) paramMap.get("pageForm");
        Map resultMap = new HashMap<>(4);
        int pageIndex = MapUtils.getIntValue(pageForm, "pageIndex",1);
        int pageSize = MapUtils.getIntValue(pageForm, "pageSize",10);

        try {
            Page page = super.queryForPage(sql, pageForm, pageIndex, pageSize);
            resultMap.put("resultList", page.getList());
            resultMap.put("pageIndex", page.getPrePageIndex());
            resultMap.put("pageSize", page.getPageSize());
            resultMap.put("totalRecords", page.getTotalNumber());
        } catch (SystemException | RequiredException | SQLException e) {
            logger.error(e.getMessage(), e);
        }
        return resultMap;
    }

修改数据

 @Override
    public void updateData(Map map) {
        Map changeNum = (Map) map.get("changeNum");
        String sql =" update cfgr_function cf set cf.CPT_VALUE=:complaintValue,cf.CPT_COMPLETE=:complaintComplete where cf.PLACE=:place  ";
        super.update(sql,changeNum);
    }