easyui 列表按钮 DataGrid（数据表格）

要实现的效果图.

官方现有的demo有没有现成的.这种超链接按钮就需要我们自己去拼凑了.

需要用到easyui formatter 函数

easyui datagrid内容单元格的默认DOM结构(与标题单元格不同)

<td field="code">
<div style="text-align:left" class="datagrid-cell datagrid-cell-c1-code">
文字
</div>
</td>

td标签的field属性便是字段的编码(官方案例中columns列集合中field:'code')，而单元格内容统一用一个div包裹起来

div标签有个 text-align样式，这个样式其实是由列属性align决定的

官方案例:

$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});

摘录:

顾名思义，formatter是格式化的意思，也就是以何种形式呈现的意思，对于一个纯文本，我可以将它呈现为checkbox，也可以呈现为 input输入框，甚至下拉框等等，或者是在文本外层包裹更多的DOM(当然包裹这样做并没有多大意义)，这就是formatter的真正意义。

使用formatter需要注意以下几点：

无论formatter出何种形式，格式化出的DOM一定都是被包含在默认的div标签内
在写formatter函数时要保证有值返回，否则单元格没有内容可展示，所以if的时候别忘了else
formatter函数不会作用在列属性checkbox为true的单元格上，checkbox列是组件预留的。

formatter: function (value, row, index) {
//return 'value:' + value + 'row' + row.SHENHEBZMC + 'index' + index;
var updBtn = '<a href="javascript:void(0)" onclick="updatePage(\'' + row.ZZBH + '\',1)" > 修改</a>';
var delBtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',2)" > 删除</a>';
var subBtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',3)" > 提交</a>';
var chtjBtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',4)" > 撤回提交</a>';
var spBtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',5)" > 审批</a>';
var cxspBtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',6)" > 撤销审批</a>';
var spTtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',7)" > 作废</a>';
var spTtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',8)" > 取消预约</a>';

if (row.SHENHEBZMC == '待提交') {
return subBtn + "    " + updBtn + "    " + delBtn;
} else if (row.SHENHEBZMC == '待审批') {
return spBtn + "    " + chtjBtn;
} else if (row.SHENHEBZMC == '同意转出') {
return spTtn + "    " + cxspBtn;
} else if (row.SHENHEBZMC == '同意接收') {
return spTtn;
} else {
return '';
}

//return '<a href="javascript:void(0)"> 提交</a>    ' + '<a href="javascript:void(0)"> 修改</a>    ' + '<a href="javascript:void(0)"> 删除</a>';
//return '<font color="red">' + 提交 + '</font>';
}

value:当前值

row:行row.property(属性,property的字段都是可以直接调用方便做业务逻辑判断)

index:序号

(待更新...)

摘录1(值得参考的写法)

unction formatType(val, row, index) {
var cdate = '<input class="easyui-datebox" id="startDate" type="text"  style="height: 32px; width: 80px" data-options="formatter:Common.TimeFormatter,parser:dateparser" />';
var ctime = '<input class="easyui-datetimespinner"  data-options="formatter:Spinformattime,parser:Spinparser" style="width:80px;">';
var mcombox = '<input class="easyui-combobox" id="mc" name="mc" style="width:235px" url=\'\' data-options="valueField:\'zhymch\', textField:\'zhymc\',multiple:true,panelHeight:\'auto\'" >';
var scombox = '<input class="easyui-combobox" id="sc" name="sc" data-options="valueField:\'id\',textField:\'text\'">';
var nbox = '<input class="easyui-numberbox" value="100" data-options="min:0,precision:2">';
switch (row.OPERATETYPE) {
case "dt":
return ctime;
break;
case "scm":
return scombox;
break;
case "mcm":
return mcombox;
break;
case "d":
return cdate;
break;
default:
break;
}
};

摘录2



My Project的实践

$("#easy-grid").datagrid({
width: $(".grid").width() - 10,
height: ($(window).height() - 20),
url: 'ZZ_Fcdzzd_Select.aspx',
queryParams: {
Trans: 'load',
startDate: $("#txt_ZZYYSJ").val(),
endDate: $("#txt_zzrqjs").val(),
yy: $("#hid_zzyy").val(),
ztzd: $('#cbb_ztzd').combobox('getValue'),
ztbm: $("#txt_ztzd").val(),
zxzt: $('#cbb_zxzt').combobox('getValue'),
zzlx: $('#cbb_zzlx').combobox('getValue'),
zzfx: $('#cbb_zzfx').combobox('getValue')
},
singleSelect: true,//当true允许只选择一行.
// fitColumns:true,
method: "post",
pageList: [20, 50],
pageSize: 20,
AllowPager: true,
nowrap: true,
striped: true,
pagination: true,
rownumbers: true,
toolbar: '#tb',
idField: 'ZZBH',

frozenColumns: [[
{
field: 'ZHUANZHENFXMC', title: '操作', width: 120, formatter: function (value, row, index) {
//return 'value:' + value + 'row' + row.SHENHEBZMC + 'index' + index;
var updBtn = '<a href="javascript:void(0)" onclick="updatePage(\'' + row.ZZBH + '\',1)" > 修改</a>';
var delBtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',2)" > 删除</a>';
var subBtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',3)" > 提交</a>';
var chtjBtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',4)" > 撤回提交</a>';
var spBtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',5)" > 审批</a>';
var cxspBtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',6)" > 撤销审批</a>';
var spTtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',7)" > 作废</a>';
var spTtn = '<a href="javascript:void(0)" onclick="subState(\'' + row.ZZBH + '\',8)" > 取消预约</a>';

if (row.SHENHEBZMC == '待提交') {
return subBtn + "    " + updBtn + "    " + delBtn;
} else if (row.SHENHEBZMC == '待审批') {
return spBtn + "    " + chtjBtn;
} else if (row.SHENHEBZMC == '同意转出') {
return spTtn + "    " + cxspBtn;
} else if (row.SHENHEBZMC == '同意接收') {
return spTtn;
} else {
return '';
}

//return '<a href="javascript:void(0)"> 提交</a>    ' + '<a href="javascript:void(0)"> 修改</a>    ' + '<a href="javascript:void(0)"> 删除</a>';
//return '<font color="red">' + 提交 + '</font>';
}
},
{ field: 'SHENHEBZMC', title: '审批状态', width: 120 },
{ field: 'XINGMING', title: '姓名', width: 150 },
{ field: 'SHENFENZH', title: '身份证号', width: 100 }
]],
columns: [[

{ field: 'XINGBIE', title: '性别', width: 80, align: "right" },
{ field: 'NIANLING', title: '年龄', width: 150, align: "center" },
{ field: 'LIANXIDH', title: '联系电话', width: 150, align: "right" },
{ field: 'LIANXISJHM', title: '手机号码', width: 200 },
//{ field: 'ZHUANZHENFXMC', title: '转诊方向', width: 200 },
{ field: 'ZHUANZHENLXNAME', title: '转诊类型', width: 200 },
{ field: 'ZZDZXZTMC', title: '执行状态', width: 200 },
{ field: 'ZZBH', title: '转诊单号', width: 200 },
{ field: 'ZHUANZHENRQ', title: '转诊日期', width: 200 },
{ field: 'ZRJGMC', title: '转往医院', width: 200 },
{ field: 'ZZYXJZSJ', title: '转诊有效期', width: 200 },
{ field: 'YIYUANYHMC', title: '转诊医生', width: 200 },
{ field: 'FUWUJGMC', title: '转诊医院', width: 200 },
{ field: 'SHEHEZZBH', title: '原转诊单号', width: 200 },
{ field: 'LIANXIDZ', title: '居住地址', width: 200 }
]],
onDblClickRow: function (rowidex, rowData) {
ViewZZD(rowData.ZZBH);
//var data = $('#easy-grid').datagrid("getSelected");
//if (data != null) {
//    ViewZZD(data.ZZBH);
//}

}

});

function subState(bm, btntype) {
$.ajax({
type: "GET",
url: "ZZ_Fcdzzd_Select.aspx",
data: { Trans: 'rbtn', bm: bm, btntype: btntype },
cache: false,
dataType: "json",
async: true,
success: function (retMsg) {
//alert(retMsg[0].XINGMING);
try {
repleacLoad();
} catch (e) {
//alert("获取失败");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert(textStatus);
alert('2');
}
});
}

参考文献

①    http://www.cnblogs.com/babietongtianta/p/3909705.html
②    http://zhidao.baidu.com/link?url=BUmFrp-VAR864D0hxACON_kEzYmjjxMfSb5YOdzvwMQnsaE5DA9W88CIi0tmBtWY1OHlh3na-tv8xz2M49wLqhBYw00_c2AcVKTh4MdN0qm