这是六一之前做的一个小案例,因为时间忙,补更上!
还是看看我们项目的框架:
步骤一:我们事先准备了json数据,在herodata2.json中,vs工具中,不能直接创建json格式的文件,我们可以先建一个xml文件,在把它的后缀名更改为.json。
{
"total": 20,
"rows": [
{
"heroNum": "hero001",
"heroName": "Uzi",
"addTime": "2010-10-1",
"Place": "ADC",
"heroCount": "1010550"
},
{
"heroNum": "hero002",
"heroName": "Ming",
"addTime": "2017-12-21",
"Place": "Support",
"heroCount": "48872"
},
{
"heroNum": "hero003",
"heroName": "Mlxg",
"addTime": "2017-2-1",
"Place": "Jungle",
"heroCount": "54883"
},
{
"heroNum": "hero004",
"heroName": "XiaoHu",
"addTime": "2016-2-12",
"Place": "Mid",
"heroCount": "87874"
},
{
"heroNum": "hero005",
"heroName": "Karsa",
"addTime": "2017-1-1",
"Place": "Jungle",
"heroCount": "52548"
},
{
"heroNum": "hero006",
"heroName": "ZiTai",
"addTime": "2016-10-21",
"Place": "Top",
"heroCount": "61558"
},
{
"heroNum": "hero007",
"heroName": "ClearLove7",
"addTime": "2018-1-1",
"Place": "Jungle",
"heroCount": "78848"
},
{
"heroNum": "hero008",
"heroName": "Faker",
"addTime": "2014-1-1",
"Place": "Mid",
"heroCount": "914488"
},
{
"heroNum": "hero009",
"heroName": "LubenWei",
"addTime": "2018-1-1",
"Place": "Mid",
"heroCount": "95154"
},
{
"heroNum": "hero010",
"heroName": "Weisheng",
"addTime": "2018-1-1",
"Place": "Mid",
"heroCount": "115480"
},
{
"heroNum": "hero011",
"heroName": "Uzi",
"addTime": "2010-10-1",
"Place": "ADC",
"heroCount": "1010550"
},
{
"heroNum": "hero012",
"heroName": "Ming",
"addTime": "2017-12-21",
"Place": "Support",
"heroCount": "48872"
},
{
"heroNum": "hero013",
"heroName": "Mlxg",
"addTime": "2017-2-1",
"Place": "Jungle",
"heroCount": "54883"
},
{
"heroNum": "hero014",
"heroName": "XiaoHu",
"addTime": "2016-2-12",
"Place": "Mid",
"heroCount": "87874"
},
{
"heroNum": "hero015",
"heroName": "Karsa",
"addTime": "2017-1-1",
"Place": "Jungle",
"heroCount": "52548"
},
{
"heroNum": "hero016",
"heroName": "ZiTai",
"addTime": "2016-10-21",
"Place": "Top",
"heroCount": "61558"
},
{
"heroNum": "hero017",
"heroName": "ClearLove7",
"addTime": "2018-1-1",
"Place": "Jungle",
"heroCount": "78848"
},
{
"heroNum": "hero018",
"heroName": "Faker",
"addTime": "2014-1-1",
"Place": "Mid",
"heroCount": "914488"
},
{
"heroNum": "hero019",
"heroName": "LubenWei",
"addTime": "2018-1-1",
"Place": "Mid",
"heroCount": "95154"
},
{
"heroNum": "hero020",
"heroName": "Weisheng",
"addTime": "2018-1-1",
"Place": "Mid",
"heroCount": "115480"
}
]
}
为保证json文件格式是正确的,可以用jsonview小工具检查。
步骤二:添加html,用于easyui数据的显示,下面的代码可能过于长,有一定基础的看起来应该不怎么吃力,有注释。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="EasyUI/themes/black/easyui.css" rel="stylesheet" />
<link href="EasyUI/themes/icon.css" rel="stylesheet" />
<script src="EasyUI/jquery.min.js"></script>
<script src="EasyUI/jquery.easyui.min.js"></script>
<script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>
<script>
$(function () {
$("#dg").datagrid({
fit: true,//自动填充
striped: true,//斑马线
rownumbers: true,//行编号
fitColumns: true,//自动填充列
method: 'get',//若不设置,会出现405错误
url: 'herodata2.json',//远程加载数据
pagination: true,//显示分页栏
//pageNumber: 1,//初始的页码是1
pageSize: 10,
pageList: [5, 10, 20],
idField: "heroNum",
singleSelect: true,//不可多选,若做多选功能,需注释
toolbar: [
{
iconCls: 'icon-edit',
text: '修改信息',
handler: function () {
//getSelected获取选中的单个对象,如果选择多个,默认是最前面那个
var item = $("#dg").datagrid("getSelected");
console.log("item:", item);
$("#heroNum").val(item.heroNum);
//console.log("heroNum", $("#heroNum").val(item.heroNum))
$("#heroName").val(item.heroName);
var d = item.addTime;
$('#addTime').datebox("setValue", d);
$("#Place").val(item.Place);
$("#heroCount").val(item.heroCount);
$("#heroEdit").dialog({
title: '修改信息',
collapsible: true,
width: 300,
height: 250,
modal: true,
buttons: [
{
iconCls: 'icon-ok',
text: '确定',
handler: function () {
$("#heroEdit").dialog('close');
//数据更新功能待完善。。。
ajaxfrmCheck();//ajax提交数据
$.messager.alert("提示", "修改成功!");
}
},
{
iconCls: 'icon-cancel',
text: '取消',
handler: function () {
$("#heroEdit").dialog('close');
}
}
]
});
}
}
],
columns: [[
{ title: '基础操作', colspan: 2 },
{ title: '基础信息', colspan: 2 },
{ title: '扩展信息', colspan: 2 }
], [
{ field: 'ck', checkbox: true, width: 80 },
{ field: 'heroNum', align: 'center', title: '编号', rowspan: 2, width: 80 },
{ field: 'heroName', align: 'center', title: '选手名称', rowspan: 2, width: 80 },
{ field: 'addTime', align: 'center', title: '出道时间', rowspan: 2, width: 80 },
{ field: 'Place', align: 'center', title: '所在位置', rowspan: 2, width: 80 },
{
field: 'heroCount', align: 'center', title: '粉丝数', rowspan: 2, width: 80
, sortable: true
, formatter: function (value, row, idx)//格式化显示数据
{
return value + "人";
}
, styler: function (value, row, idx)//格式化显示样式
{
if (value > 60000) {
return 'color:red';
}
else {
return 'color:wihte';
}
}
}
]]
});
//修改日期默认显示格式
/*$.fn.datebox.defaults.formatter = function (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
alert(y);
return m + '/' + d + '/' + y;
}*/
});
/*function DateTimeFormatter(value) {
if (value == undefined) {
return "";
}
var dateValue = new Date(value);
console.info(dateValue);
if (dateValue.getFullYear() < 1900) {
return "";
}
return dateValue.format("yyyy-MM-dd hh:mm:ss");
}*/
//ajax检查数据
function ajaxfrmCheck() {
$("#frm").form("submit", {
url: "herodata2.json",
onSubmit: function () {
var heroNum = $("#heroNum").val();
var heroName = $("#heroName").val();
var addTime = $("#addTime").datebox('getValue')
//console.log('addTime:',addTime);
var Place = $("#Place").val();
var heroCount = $("#heroCount").val();
console.info(heroNum, heroName, addTime, Place, heroCount)
if (heroName == "" || heroName == "" || Place == "" || heroCount == "") {
$.messager.alert("提示", "请输入信息!")
return false;//阻止表单提交
}
},
success: function (data) {
//数据更新功能待完善。。。
var jsonData = $.parseJSON(data);
console.info(jsonData);
//$.messager.alert("消息", jsonData);
updatedata();
}
})
};
//更新指定行
function updatedata() {
//获取行号
var row = $("#dg").datagrid('getRowIndex');
console.log("*************************************");
console.log("row为:", row);
console.log("*************************************");
var opt = $("#dg").datagrid("getRowIndex", row) + 1;
console.log("行号为:", opt)
$('#dg').datagrid('updateRow', {
//formatter: function () {
//
//},
//获取选中的行号
index: 2,
//更新指定列
row: {
//name: '新名称',
//note: '新消息'
},
});
};
</script>
</head>
<body>
<table id="dg"></table>
<div id="heroEdit">
<!--编号:<span id="heroNum"></span><br />
选手名称:<span id="heroName"></span><br />
出道时间:<span id="addTime"></span><br />
所在位置:<span id="Place"></span><br />
粉丝数:<span id="heroCount"></span>-->
<form id="frm">
<table width="100%" style="margin:0 auto;text-align:center">
<tr>
<td>编号:</td>
<td><input type="text" id="heroNum" name="heroNum" /></td>
</tr>
<tr>
<td>选手名称:</td>
<td><input type="text" id="heroName" name="heroName" /></td>
</tr>
<tr>
<td>出道时间:</td>
<td>
<!--<input type="date" id="addTime" name="addTime" />-->
<input type="text" id="addTime" class="easyui-datebox"/>
</td>
</tr>
<tr>
<td>所在位置:</td>
<td><input type="text" id="Place" name="Place" /></td>
</tr>
<tr>
<td>粉丝数:</td>
<td><input type="number" id="heroCount" name="heroCount" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
此处的更新数据功能是个假的,但是也能选中某行数据,对它进行编辑。还是非常不错的。
看看最后的效果: