easyui dategrid 的部分细节操作

1. 按钮样式 , 保存和取消按钮.. .用a链接, button或者input都没有样式

<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveZone()" style="width:90px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>

2. 数据列表

function datagrid_load()
        {
            $('#dg').datagrid({
                title : '手游区列表',
                url : 'do_admin_conf.php?action=zone_list',
                rownumbers : true,    //显示行号
                // ctrlSelect: true,     //ctrl+左键 选多行
                singleSelect: false,   //只允许选择单条数据
                fitColumns : true,    //设置为true,自动扩展或收缩列的大小以适应网格宽度和防止水平滚动条
                collapsible : true,   //当True时可显示折叠按钮。默认false。
                pagination : true,    //True 就会显示行号的列。 
                method : 'post',
                toolbar: '#toolbar',
                pageSize: 20,         //初始化页面大小
                queryParams: {s_ptname:$('#s_ptname').val()},
                idField : "id",

                columns:[[
                     {field:'checkbox',checkbox:true},
                    {field:'ptname',title:'平台名称',width:150,halign:'center',align:'center',sortable:true},
                    {field:'ptid',title:'平台ID',width:80,halign:'center',align:'center',sortable:true},
                    {field:'zname',title:'区名称',width:300,halign:'center',align:'center',sortable:true},
                    {field:'zid',title:'区ID',width:300,halign:'center',align:'center',sortable:true},
                    {field:'stime',title:'开区时间',width:300,halign:'center',align:'center',sortable:true},
                    {field:'ip',title:'IP',width:400,halign:'center',align:'center',sortable:true},
                    {field:'port',title:'端口',width:200,halign:'center',align:'center',sortable:true},
                    {field:'state',title:'区状态',width:200,halign:'center',align:'center',sortable:true},
                    {field:'reviewid_status',title:'是否审核状态',width:100,halign:'center',align:'center',sortable:true, formatter: function(value,row,index){
                        if (value == 1){
                            return '是';
                        } else {
                            return '否';
                        }
                    }
                    },
                    {field:'chartotal',title:'创建人数',width:150,halign:'center',align:'center',sortable:true},
                    {field:'import_people',title:'导入人数',width:150,halign:'center',align:'center',sortable:true},
                    {field:'import_tuijian',title:'智能推荐',width:100,halign:'center',align:'center',sortable:true, formatter: function (value,row,index) {
                        if (value == 1){
                            return '是';
                        } else {
                            return '否';
                        }
                    }},

                    {field:'sort',title:'排序',width:100,halign:'center',align:'center',sortable:true},
                ]]
            });
        }

3. 新增数据和修改数据

       function newZones(){
            $('#dlg').dialog('open').dialog('setTitle','新加');
            //$('#fm').form('clear');//清除form表单数据
	    
            url = "do_admin_conf.php?action=zone_add";
        }

        function editZones(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
                $('#dlg').dialog('open').dialog('setTitle','修改');
                $('#fm').form('load',row);//获取本行数据
		url = "do_admin_conf.php?action=zone_edit&id="+row.id;
            }
        }

#dlg 是表单div的 id
     
     //操作form
     function saveZone(){
            $('#fm').form('submit',{
                url: url,
                onSubmit: function(){
                    return $(this).form('validate');//表单所以数据提交
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.errorMsg){
                        $.messager.show({
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    } else {
                        $('#dlg').dialog('close');//关闭窗口
                        $('#dg').datagrid('reload');//更新列表
                        $('#dg').datagrid('clearChecked');//清除所有勾选的行
                    }
                }
            });
        }

4. 获取选中行 

var row = $('#dg').datagrid('getSelected'); alert(row.name);

5. 开启多行多选

$('#dg').datagrid({

  singleSelect: false,   //只允许选择单条数据

6. 开启checkbox 复选框

  $('#dg').datagrid({

idField : "id",

columns:[[
     {field:'checkbox',checkbox:true},

7.获取多选行,

var checkedItems = $('#dg').datagrid('getChecked');//获取多选

var ids = [];//数组
$.each(checkedItems, function(index, item){
    ids.push(item.id); //每个id都存入数组
});
//alert(ids.join(","));
//console.log(ids.join(","));

8.清除勾选行,

操作完多选后, 选中的复选框并不会清除;需要使用

$('#dg').datagrid('clearChecked');//清除所有勾选的行

9. 更新数据datagrid列表

$('#dg').datagrid('reload');//更新列表