1.关于datagrid的可编辑的表格
首先扩展easyui的编辑功能
<script type="text/javascript">
$.extend($.fn.datagrid.methods, {
editCell: function(jq,param){
return jq.each(function(){
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field){
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
var ed = $(this).datagrid('getEditor', param);
if (ed){
if ($(ed.target).hasClass('textbox-f')){
$(ed.target).textbox('textbox').focus();
} else {
$(ed.target).focus();
}
}
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
},
enableCellEditing: function(jq){
return jq.each(function(){
var dg = $(this);
var opts = dg.datagrid('options');
opts.oldOnClickCell = opts.onClickCell;
opts.onClickCell = function(index, field,value){
if (opts.editIndex != undefined){
if (dg.datagrid('validateRow', opts.editIndex)){
dg.datagrid('endEdit', opts.editIndex);
opts.editIndex = undefined;
} else {
return;
}
}
dg.datagrid('selectRow', index).datagrid('editCell', {
index: index,
field: field,
value: value
});
opts.editIndex = index;
opts.oldOnClickCell.call(this, index, field,value);
}
});
}
});
</script>复制代码html代码
<table id="dg" class="easyui-datagrid">
<thead>
<tr>
<th field='ck' checkbox="true" width=60 align="center" halign="center"></th>
<th field="title" width="100" editor="
{
type:'combobox',
options:{
valueField:'material_title',
textField:'material_title',
editable:true,
url:'...'}}
">名称</th>
<!--<th field="code" width="100" align="center">编码</th>-->
<th field="unit" width="100" align="center">单位</th>
<th field="company" width="100" align="center">销售公司</th>
<th field="three_month_num" width="100" align="center">近三个月平均量</th>
<th field="ideal_stock_num" width="100" align="center">预估最高库存值</th>
<th field="stock_num" width="100" align="center">当前库存 </th>
<th field="need_num" width="100" align="center" editor="{type:'numberbox',required:true}">需求量</th>
<th field="supplier" width="100" align="center">商家</th>
</tr>
</thead>
</table>复制代码上面的html代码中我让 field="title"变成了一个下拉框，field="need_num"变成了一个可编辑的数字框
JavaScript代码
('#dg').datagrid({
url: "..",
rownumbers:true,
method: 'post',
fitColumns:true,
nowrap:false,
showHeader:true,
showFooter:true,
striped:true,
loadFilter:function (data) { //一般都是要在展示数据之前对请求到的数据再次处理才会用到的
return data;
},
onLoadSuccess:function(data){ //加载成功之后对数据处理
return data;
},
onClickCell: function (rowIndex, field, value) {},//我是为了在这里获得编辑的index
onAfterEdit:function (rowIndex, rowData, changes) {} //结束编辑之后可以在这里面来看更改的内容以便于后面操作
}).datagrid('enableCellEditing'); //datagrid('enableCellEditing')这个就是使datagrid可编辑 复制代码2.关于datagrid的合并单元格
标题头的合并可以直接在html中来合并
<table id="dg" class="easyui-datagrid" title="汇总表" style=" height:100%">
<thead>
<tr>
<th field='name' width=90 rowspan="2" halign="center" ></th>复制代码<th field='' width=90 rowspan="2" halign="center" ></th>
<!--<th field='' width=90 rowspan="2" align="left" halign="center"></th>-->
<th colspan="5">A=B+C</th>
<th colspan="4">B</th>
<th colspan="4">C</th>
</tr>
<tr>
<th field='' width=60 align="right" halign="center" >A1</th>
<th field='' width=60 align="right" halign="center" >A2</th>
<th field='' width=60 align="right" halign="center" >A3</th>
<th field='' width=60 align="right" halign="center" >A4</th>
<th field='' width=60 align="right" halign="center">A2/A1</th>
<th field='' width=60 align="right" halign="center" >B1</th>
<th field='' width=60 align="right" halign="center" >B2</th>
<th field='' width=60 align="right" halign="center" >B3</th>
<th field='' width=60 align="right" halign="center" >B2/B1</th>
<th field='' width=60 align="right" halign="center" >C1</th>
<th field='' width=60 align="right" halign="center" >C2</th>
<th field='' width=60 align="right" halign="center" >C3</th>
<th field='' width=60 align="right" halign="center" >C2/C1</th>
</tr>
</thead>
</table>复制代码关于内容的合并需要使用js了
//合并方法
function mergeCellsByField(tableID, colList) {
var colArray = colList.split(",");
var tTable = $("#" + tableID);
var tableRows = tTable.datagrid("getRows");
var tableRowCnts = tableRows.length;
var rowspan;
var preTxt = "";
var curTxt = "";
for (j = colArray.length - 1; j >= 0; j--) {
preTxt = "";
rowspan = 1;
for (i = 0; i <= tableRowCnts; i++) {
if (i == tableRowCnts) {
curTxt = "";
} else {
curTxt = tableRows[i][colArray[j]];
}
if (preTxt == curTxt) {
rowspan += 1;
} else {
tTable.datagrid("mergeCells", {
index: i - rowspan,
field: colArray[j],//合并字段
rowspan: rowspan,
colspan: null
});
rowspan = 1;
}
preTxt = curTxt;
}
}
for (i = 0; i <= tableRowCnts-1; i++) { //这个for循环是我横向合并的全国汇总
var txt = tableRows[i].name;
if((""+txt).indexOf("全国汇总")>=0){
tTable.datagrid("mergeCells", {
index: i,
field: 'name',//合并字段
rowspan: null,
colspan: 2
});
}
}
}复制代码然后在datagrid加载成功后引用
$('#dg').datagrid({
method: 'post',
pagination:false,
fitColumns:true,
pageSize: 10,
fit:true,
singleSelect: false,
pageList: [10,50, 100, 200],
onLoadSuccess:function(data){
if (data.rows.length > 0) {
//调用mergeCellsByField()合并单元格
mergeCellsByField("dg", "合并的单元格的field,合并的单元格的field");
}
}
})复制代码关于后台传过来的数据还是按照标准的数据格式来就可以了，遇到指定字段下面的相同字符的话datagrid会自动合并的
关于合并成功之后序号和复选框的合并以及勾选选中 例子如下：
html代码
<table id="dg" class="easyui-datagrid" style="height: 100%">
<thead>
<tr>
<th field="ck" checkbox="true" align="center" halign="center"></th>
<th field="num" width="100" align="center" halign="center">序号</th>
<th field="set_number" width="100" align="center" halign="center">000</th>
<th field="qq" width="100" align="center">aaa</th>
<th field="cc" width="100" align="center">bbbb</th>
<th field="aa" width="100" align="center">ccc</th>
<th field="cc" width="100" align="center" >ddd</th>
</tr>
</thead>
</table>复制代码js代码
$('#dg').datagrid({
url:'..',
method:'post',
fitColumns:true,
singleSelect: false,
loadFilter: function(data){ //在这个方法中要对数据进行处理
var rows = data.rows;
for (var i=0,j=rows.length;i<j;i++){
rows[i].ck = rows[i].set_number; //令ck字段的内容等于set_number的内容
if(i!=0){ //num就是我们的排序
if(rows[i].set_number==rows[i-1].set_number){
rows[i].num=rows[i-1].num;
}else{
rows[i].num=parseInt(rows[i-1].num)+1;
}
}else{
rows[i].num=1;
}
}
data.rows = rows;
return data;
},
onLoadSuccess:function(data){
if(data.rows.length>0){ //这里就是合并勾选框，序号，以及000
mergeCellsByField('dg','ck,num,set_number');
}
},
onClickRow: function (rowIndex, rowData) {
$(this).datagrid('unselectRow', rowIndex);
},
onClickCell: function (rowIndex, field, value) { }
})
复制代码仅仅有上面的代码还是不够的，这是的勾选框仍然只能勾选合并之前的第一行，而不会勾选合并的所有行，我对勾选框做了一个勾选选中的判断，用来勾选合并的，或者取消勾选
/*列表勾选框勾选一个时，同时勾选其他合并的单元号*/
$('#dg_table').delegate('input','click',function () { //dg_table是table的父元素div的id
var i = $(this).parents('td').attr('rowspan');
var indexC = $(this).parents('tr').attr('datagrid-row-index');
if($(this).is(':checked')){
if(i!=undefined){
for(var j = 0; j<i;j++){
$('#dg').datagrid('checkRow',parseInt(indexC)+j);
}
}else{
$('#dg').datagrid('checkRow',indexC);
}
}else{
if(i!=undefined){
for(var j = 0; j<i;j++){
$('#dg').datagrid('uncheckRow',parseInt(indexC)+j);
}
}else{
$('#dg').datagrid('uncheckRow',indexC);
}
}
})复制代码注意：上面的序号只能用作不分页的，如果是分页的不能那样操作，因为每一页都会从0开始排序
3.如果不想使用easyui的分页，想自己定义分页可以用下面的fomatter函数
function(val,row,index){
var options = $("#dg").datagrid('getPager').data("pagination").options;
var currentPage = options.pageNumber;
var pageSize = options.pageSize;
if(currentPage==0){
currentPage=1;
}
return (pageSize * (currentPage -1))+(index+1);
}复制代码这就是序号单元格的格式化函数fomatter。
好了，以上就是再次使用easyui的datagrid的总结！
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
