JQuery Easyui datagrid 数据表格的使用 :
使用javascript的写法.
第一步: <table id="db"></table> //为表格提供位置.
第二步: 配置参数
参数一: columns, 这里是二维数组,解决复杂表头的问题.
columns: [[
{
field: "id", //用于服务器返回的json数据的字段对应
title: "编号", //列标题
width: 100 //宽度
}]]
参数二: url, 这里指向的是 json数据.
{
"total": 100, //总的记录数
"rows":[{},{}...] //装有数据的数组
}
参数三: pagination: boolean(true) 分页条的添加.
参数四: toolbar 数据表格顶部工具栏
toolbar[{
id: 'button-eidt',
text: '修改'
iconCls: 'icon-edit',
handler: function(){
alert(修改);
}
}]
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>分页实现的原理.
1. 客户端页面返回的数据. page: 当前的页码, rows: 每页显示的数据数.
第一步: action封装 Pageable pageable = new PageRequest(page - 1, rows);
第二步: 在业务层调用 standardRepository.findAll(pageable), 即可.
第三步: 最终action中得到的数据为 pageData 对象, 里面封装了 页面所需的数据.
第四步: 讲述存入map集合中, 然后以json的形式,存入valueStack中. 如下:
@Action(value = "standard_pageQuery",results = @Result(name = "success", type = "json"))
public String pageQuery(){
// 创建一个Pageable对象, 传递当前页码, 每页显示记录数.
Pageable pageable = new PageRequest(page - 1, rows);
// 调用业务层的方法, 获取数据
Page<Standard> pageData = standardService.findPageData(pageable);
//创建一个map集合封装数据
Map<String, Object> map = new HashMap<String, Object>();
map.put("total",pageData.getTotalElements());
map.put("rows",pageData.getContent());
// 获取valueStack, 将map集合压入栈顶; 页面会自动将数据转换为json
ValueStack valueStack = ActionContext.getContext().getValueStack();
valueStack.push(map);
return SUCCESS;
}
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>修改,回显数据.
方法:这里返回的数据是当前行所有的数据.并不只是行号; 利用 $("#form对象").form('load',row)加载数据.
getSelected: 返回第一个选中的行记录或者null;
getSelections: 返回所有的选中的行,没有记录的时候返回的是空数组.()
//获取复选框选中的表格
var rows = $("#grid").datagrid('getSelections');
// 判断rows的长度
if(rows.length != 1){
// 这里获取的是多个复选框或者没有选中
$.messager.alert("提示信息","复选框选取不合理","warning");
}else {
// 获取数组中的数据
var row = rows[0];
// 获取当前复选框所有的数据.利用easyui的方法将数据加载进表格中.
$("#standardWindow").form('load',row);
$("#standardWindow").window('open');
}
1.combobox的使用
应用场景: 表与表之间的关系为 1:n 的关系. 在添加多的一方的时候,需要有一的一方的引用.
实现: class = 'easyui-combobox'
属性: {
url:异步请求服务器的数据 ---> 数据类型为 json格式的
textField: name 用户看到的内容 ---> 类似于<option>textFiled</option>
valueField:id 提交表单的内容 ---> 类似于<option value='valueFiled'></option>
}
要求的数据格式:
现在: [{id:1,name:'10-20公斤'},{id:2,name:'20-30公斤'}]
以前: <select name="standard.id">
<option value="1">10-20公斤</option>
<option value="2">20-30公斤</option>
</select>
-------------------------------------------------------------------->>>> 回显数据
easyui的combobox回显数据:
第一步: 需要给 下拉列表 combobox 添加一个id;
第二步: 调用回显数据的方法, $("#comboboxid").combobox('setValue','row[0].standard.id');
第三步: 不要忘记提供隐藏域设置 这样用于回显id的值.
2.表格行录入功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css" href="../../css/default.css">
<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
<script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
var editIndex ;
function doAdd(){
if(editIndex != undefined){
$("#grid").datagrid('endEdit',editIndex);
}
if(editIndex==undefined){
$("#grid").datagrid('insertRow',{
index : 0,
row : {}
});
$("#grid").datagrid('beginEdit',0);
editIndex = 0;
}
}
function doSave(){
$("#grid").datagrid('endEdit',editIndex );
}
function doCancel(){
if(editIndex!=undefined){
$("#grid").datagrid('cancelEdit',editIndex);
if($('#grid').datagrid('getRows')[editIndex].id == undefined){
$("#grid").datagrid('deleteRow',editIndex);
}
editIndex = undefined;
}
}
var toolbar = [ {
id : 'button-add',
text : '新增一行',
iconCls : 'icon-edit',
handler : doAdd
}, {
id : 'button-cancel',
text : '取消编辑',
iconCls : 'icon-cancel',
handler : doCancel
}, {
id : 'button-save',
text : '保存',
iconCls : 'icon-save',
handler : doSave
}];
var columns = [ [ {
field : 'id',
title : '工作单号',
width : 120,
align : 'center',
editor :{
type : 'validatebox',
options : {
required: true
}
}
}, {
field : 'arrivecity',
title : '到达地',
width : 120,
align : 'center',
editor :{
type : 'validatebox',
options : {
required: true
}
}
},{
field : 'product',
title : '产品',
width : 120,
align : 'center',
editor :{
type : 'validatebox',
options : {
required: true
}
}
}, {
field : 'num',
title : '件数',
width : 120,
align : 'center',
editor :{
type : 'numberbox',
options : {
required: true
}
}
}, {
field : 'weight',
title : '重量',
width : 120,
align : 'center',
editor :{
type : 'validatebox',
options : {
required: true
}
}
}, {
field : 'floadreqr',
title : '配载要求',
width : 220,
align : 'center',
editor :{
type : 'validatebox',
options : {
required: true
}
}
}] ];
$(function(){
$("body").css({visibility:"visible"});
$('#grid').datagrid( {
iconCls : 'icon-forward',
fit : true,
border : true,
rownumbers : true,
striped : true,
pageList: [30,50,100],
pagination : true,
toolbar : toolbar,
url : "",
idField : 'id',
columns : columns,
onDblClickRow : doDblClickRow,
onAfterEdit : function(rowIndex, rowData, changes){
console.info(rowData);
editIndex = undefined;
}
});
});
function doDblClickRow(rowIndex, rowData){
alert("双击表格数据...");
console.info(rowIndex);
$('#grid').datagrid('beginEdit',rowIndex);
editIndex = rowIndex;
}
</script>
</head>
<body class="easyui-layout" style="visibility:hidden;">
<div region="center" border="false">
<table id="grid"></table>
</div>
</body>
</html>
1507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
