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);

    }