datagrid相关技术点

Orangesss_

于 2018-08-29 14:26:31 发布

阅读量183

点赞数

本文链接：https://blog.csdn.net/orangesss_/article/details/82182667

版权

JQuery Easyui datagrid 数据表格的使用 :

使用javascript的写法.
第一步: <table id="db"></table>    //为表格提供位置.
第二步: 配置参数
    参数一: columns, 这里是二维数组,解决复杂表头的问题.
    columns: [[
        {
            field: "id", //用于服务器返回的json数据的字段对应
            title: "编号", //列标题
            width: 100 //宽度
        }]]
    参数二: url, 这里指向的是 json数据.
    {
        "total": 100,           //总的记录数
        "rows":[{},{}...]       //装有数据的数组 
    }
    参数三: pagination: boolean(true) 分页条的添加.
    参数四: toolbar  数据表格顶部工具栏
    toolbar[{
        id: 'button-eidt',
        text: '修改'
        iconCls: 'icon-edit',
        handler: function(){
            alert(修改);
        }
    }]
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>分页实现的原理.
1. 客户端页面返回的数据. page: 当前的页码, rows: 每页显示的数据数.
第一步: action封装 Pageable pageable = new PageRequest(page - 1, rows);
第二步: 在业务层调用 standardRepository.findAll(pageable), 即可.
第三步: 最终action中得到的数据为 pageData 对象, 里面封装了 页面所需的数据.
第四步: 讲述存入map集合中, 然后以json的形式,存入valueStack中. 如下:
@Action(value = "standard_pageQuery",results = @Result(name = "success", type = "json"))
    public String pageQuery(){
        // 创建一个Pageable对象, 传递当前页码, 每页显示记录数.
        Pageable pageable = new PageRequest(page - 1, rows);
        // 调用业务层的方法, 获取数据
        Page<Standard> pageData = standardService.findPageData(pageable);
        //创建一个map集合封装数据
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("total",pageData.getTotalElements());
        map.put("rows",pageData.getContent());
        // 获取valueStack, 将map集合压入栈顶; 页面会自动将数据转换为json
        ValueStack valueStack = ActionContext.getContext().getValueStack();
        valueStack.push(map);
        return SUCCESS;
    }
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>修改,回显数据.
方法:这里返回的数据是当前行所有的数据.并不只是行号; 利用 $("#form对象").form('load',row)加载数据.
getSelected:    返回第一个选中的行记录或者null;
getSelections:  返回所有的选中的行,没有记录的时候返回的是空数组.()
//获取复选框选中的表格
var rows = $("#grid").datagrid('getSelections');
// 判断rows的长度
if(rows.length != 1){
    // 这里获取的是多个复选框或者没有选中
    $.messager.alert("提示信息","复选框选取不合理","warning");
}else {
    // 获取数组中的数据
    var row = rows[0];
    // 获取当前复选框所有的数据.利用easyui的方法将数据加载进表格中.
    $("#standardWindow").form('load',row);
    $("#standardWindow").window('open');
}

1.combobox的使用

应用场景: 表与表之间的关系为 1:n 的关系. 在添加多的一方的时候,需要有一的一方的引用.
实现: class = 'easyui-combobox'
属性: {
     url:异步请求服务器的数据             ---> 数据类型为 json格式的
     textField: name 用户看到的内容    ---> 类似于<option>textFiled</option>
     valueField:id 提交表单的内容        ---> 类似于<option value='valueFiled'></option>
}
要求的数据格式:
    现在: [{id:1,name:'10-20公斤'},{id:2,name:'20-30公斤'}]
    以前: <select name="standard.id">
            <option value="1">10-20公斤</option>
            <option value="2">20-30公斤</option>
         </select>
-------------------------------------------------------------------->>>> 回显数据
easyui的combobox回显数据:
第一步: 需要给 下拉列表 combobox 添加一个id;
第二步: 调用回显数据的方法, $("#comboboxid").combobox('setValue','row[0].standard.id');
第三步: 不要忘记提供隐藏域设置  这样用于回显id的值.

2.表格行录入功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- 导入jquery核心类库 -->
        <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
        <!-- 导入easyui类库 -->
        <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
        <link rel="stylesheet" type="text/css" href="../../css/default.css">
        <script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
        <script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
        <script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
        <script type="text/javascript">
            var editIndex ;

            function doAdd(){
                if(editIndex != undefined){
                    $("#grid").datagrid('endEdit',editIndex);
                }
                if(editIndex==undefined){

                    $("#grid").datagrid('insertRow',{
                        index : 0,
                        row : {}
                    });
                    $("#grid").datagrid('beginEdit',0);
                    editIndex = 0;
                }
            }

            function doSave(){
                $("#grid").datagrid('endEdit',editIndex );
            }

            function doCancel(){
                if(editIndex!=undefined){
                    $("#grid").datagrid('cancelEdit',editIndex);
                    if($('#grid').datagrid('getRows')[editIndex].id == undefined){
                        $("#grid").datagrid('deleteRow',editIndex);
                    }
                    editIndex = undefined;
                }
            }

            //工具栏
            var toolbar = [ {
                id : 'button-add',  
                text : '新增一行',
                iconCls : 'icon-edit',
                handler : doAdd
            }, {
                id : 'button-cancel',
                text : '取消编辑',
                iconCls : 'icon-cancel',
                handler : doCancel
            }, {
                id : 'button-save',
                text : '保存',
                iconCls : 'icon-save',
                handler : doSave
            }];
            // 定义列
            var columns = [ [ {
                field : 'id',
                title : '工作单号',
                width : 120,
                align : 'center',
                editor :{
                    type : 'validatebox',
                    options : {
                        required: true
                    }
                }
            }, {
                field : 'arrivecity',
                title : '到达地',
                width : 120,
                align : 'center',
                editor :{
                    type : 'validatebox',
                    options : {
                        required: true
                    }
                }
            },{
                field : 'product',
                title : '产品',
                width : 120,
                align : 'center',
                editor :{
                    type : 'validatebox',
                    options : {
                        required: true
                    }
                }
            }, {
                field : 'num',
                title : '件数',
                width : 120,
                align : 'center',
                editor :{
                    type : 'numberbox',
                    options : {
                        required: true
                    }
                }
            }, {
                field : 'weight',
                title : '重量',
                width : 120,
                align : 'center',
                editor :{
                    type : 'validatebox',
                    options : {
                        required: true
                    }
                }
            }, {
                field : 'floadreqr',
                title : '配载要求',
                width : 220,
                align : 'center',
                editor :{
                    type : 'validatebox',
                    options : {
                        required: true
                    }
                }
            }] ];

            $(function(){
                // 先将body隐藏，再显示，不会出现页面刷新效果
                $("body").css({visibility:"visible"});

                // 运单数据表格
                $('#grid').datagrid( {
                    iconCls : 'icon-forward',
                    fit : true,
                    border : true,
                    rownumbers : true,
                    striped : true,
                    pageList: [30,50,100],
                    pagination : true,
                    toolbar : toolbar,
                    url :  "",
                    idField : 'id',
                    columns : columns,
                    onDblClickRow : doDblClickRow,
                    onAfterEdit : function(rowIndex, rowData, changes){
                        console.info(rowData);
                        editIndex = undefined;
                    }
                });
            });

            function doDblClickRow(rowIndex, rowData){
                alert("双击表格数据...");
                console.info(rowIndex);
                $('#grid').datagrid('beginEdit',rowIndex);
                editIndex = rowIndex;
            }
        </script>
    </head>

    <body class="easyui-layout" style="visibility:hidden;">
        <div region="center" border="false">
            <table id="grid"></table>
        </div>
    </body>
</html>