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');//更新列表