JQuery EasyUI学习记录（五）

1.datagrid使用方法(重要)

1.1将静态html渲染为datagrid样式

<!--方式一: 将静态html渲染为datagrid样式 -->
        <table class="easyui-datagrid">
            <thead>
                <tr>
                    <th data-options="field:'id'">编号</th>
                    <th data-options="field:'name'">姓名</th>
                    <th data-options="field:'age'">年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr> 
                    <td>001</td>
                    <td>小明</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>小王</td>
                    <td>21</td>
                </tr>
            </tbody>
        </table>

1.2发送ajax请求获取json数据创建datagrid

<table data-options="url:'${pageContext.request.contextPath}/json/datagrid-data.json'" class="easyui-datagrid">
            <thead>
                <tr>
                    <th data-options="field:'id'">编号</th>
                    <th data-options="field:'name'">姓名</th>
                    <th data-options="field:'age'">年龄</th>
                </tr>
            </thead>
        </table>

json文件:

{"id":"001", "name":"小明" , "age":15 },
{"id":"002", "name":"小红" , "age":15 },
{"id":"003", "name":"小黄" , "age":15 }

1.3使用easyUI提供的API创建datagrid

<table id="myTable"></table>

<script type="text/javascript">
            $(function(){
                //页面加载完成后，创建数据表格datagrid
                $("#myTable").datagrid({
                    //定义标题行所偶遇的列，即头行
                    columns:[[
                             {title:'编号',field:'id',checkbox:true},
                             {title:'姓名',field:'name'},
                             {title:'年龄',field:'age'},
                             {title:'地址',field:'address'}
                             ]],
                    //指定数据表格发送ajax请求
                    url:'${pageContext.request.contextPath}/json/datagrid-data.json',
                    //行号
                    rownumbers:true,
                    //是否单选
                    singleSelect:true,
                    //定义工具栏
                    toolbar:[
                             {text:'添加',iconCls:'icon-add',
                                 //为按钮绑定事件
                                 handler:function(){
                                     alert(1);
                                 }
                             },
                             {text:'删除',iconCls:'icon-remove'},
                             {text:'修改',iconCls:'icon-edit'},
                             {text:'查询',iconCls:'icon-search'}
                             ],
                     //显示分页栏,仅前台展示
                     pagination:true
                });
            })
        </script>

1.4数据表格datagrid提供的方法，用于获取所有选中的行：getSelections

 

<table id="grid"></table>

// 取派员信息表格
        $('#grid').datagrid( {
            iconCls : 'icon-forward',
            //自适应
            fit  : true,
            border : false,
            rownumbers : true,
            striped : true,
            //每页显示的页数
            pageList: [30,50,100],
            pagination : true,
            toolbar : toolbar,
            url : "staffAction_pageQuery.action",
            idField : 'id',
            columns : columns,
            //绑定双击事件
            onDblClickRow : doDblClickRow
        });

 

// 定义列
    var columns = [ [ {
        field : 'id',
        checkbox : true,
    },{
        field : 'name',
        title : '姓名',
        width : 120,
        align : 'center'
    }, {
        field : 'telephone',
        title : '手机号',
        width : 120,
        align : 'center'
    }, {
        field : 'haspda',
        title : '是否有PDA',
        width : 120,
        align : 'center',
        formatter : function(data,row, index){
            if(data=="1"){
                return "有";
            }else{
                return "无";
            }
        }
    }, {
        field : 'deltag',
        title : '是否作废',
        width : 120,
        align : 'center',
        formatter : function(data,row, index){
            if(data=="0"){
                return "正常使用"
            }else{
                return "已作废";
            }
        }
    }, {
        field : 'standard',
        title : '取派标准',
        width : 120,
        align : 'center'
    }, {
        field : 'station',
        title : '所谓单位',
        width : 200,
        align : 'center'
    } ] ];

修改删除按钮绑定的事件：

function doDelete(){
        //获取数据表格中所有选中的行，返回数组对象
        var rows = $("#grid").datagrid("getSelections");
        if(rows.length == 0){
            //没有选中记录，弹出提示
            $.messager.alert("提示信息","请选择需要删除的取派员！","warning");
        }else{
            //选中了取派员,弹出确认框
            $.messager.confirm("删除确认","你确定要删除选中的取派员吗？",function(r){
                if(r){
                    
                    var array = new Array();
                    //确定,发送请求
                    //获取所有选中的取派员的id
                    for(var i=0;i<rows.length;i++){
                        var staff = rows[i];//json对象
                        var id = staff.id;
                        array.push(id);
                    }
                    var ids = array.join(",");//1,2,3,4,5
                    location.href = "staffAction_deleteBatch.action?ids="+ids;
                }
            });
        }
    }

 

1.1 使用easyUI提供的API创建datagrid（掌握）