easyui 动态生成columns怎么绑定对应的rows

wangjia1991 2016-06-03 02:42:20

列子：

<div style='width:100%;text-align:right'>
<table id='dg' border="1">

</table>
</div

var data = {
"total": "1",
"columns": [
[
{ "field": "ItemName", "title": "费用类别", "align": "center", "rowspan": "2", "width": 200 },
{ "title": "月实际收支情况", "align": "center", "colspan": "4" } //合并4列
],
[
{ "field": "ChangeDateTotal", "title": "小计", "align": "center", "formatter": "Common.toThousands", "width": 100 },
{ "field": "SJBalance", "title": "实际（网银+现金）", "align": "center", "formatter": "Common.toThousands", "width": 100 },
{ "field": "CDBalance", "title": "承兑", "align": "center", "formatter": "Common.toThousands", "width": 100 },
{ "field": "NBBalance", "title": "内部交叉", "align": "center", "formatter": "Common.toThousands", }

]
],
"rows": [
{
"ItemName": "收款合计"
"ChangeDateTotal": "0",
"SJBalance": "0",
"CDBalance": "0",
"NBBalance": "0"

}

]
};
$('#dg').datagrid({
columns: data.columns
}).datagrid("loadData", data);

按照上面的写法，rows数据没法绑定到对用的列里面？怎么设置rows 的格式才能绑定数据？急求

...全文

124 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

wangjia1991 2016-06-03

打赏
举报

回复

列子中最后一列多写了个逗号，去掉还是没有达到想要的结果

如题，项目要用到jeasyui，所以必须要下载它的demo，获取相应的js,css等等的文件 jeasyui的下载地址：http://www.jeasyui.com/download/index.php <script src="easyui/jquery.min.js" type="text/javascript"> $(function () { $("#tab").datagrid({ // width: 600, //宽度 height: 400, //高度 singleSelect: true, //选中一行的设置 fitColumns:true, url: "EditorUserHandler.ashx", //请求路径 title: "用户信息", //标题 iconCls: "icon-add", //图标 // collapsible: true, //隐藏按钮 //冻结列 // frozenColumns: [[{ field: "chk", "checkbox": true}]], //复选框 //列 rownumbers: false, //传输参数 queryParams: { "action": "query" }, pagination: true, toolbar: "#tool" }); $("#tab").datagrid('getPager').pagination({ beforePageText: "第", afterPageText: "页", displayMsg: "当前 {from} - {to}条数据共{total} 条数据", pageSize: 10, pageList: [5, 10, 15, 20, 30] }); }) <script type="text/javascript"> function CreateFormPage(strPrintName, printDatagrid) { var tableString = '

年半年广东省房屋市政工程安全生产文明施工示范工地申报项目汇总表
地区（部门）公章：	报送时间：年月日

'; var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象 var columns = printDatagrid.datagrid("options").columns; // 得到columns对象 var nameList = ''; // 载入title if (typeof columns != 'undefined' && columns != '') { $(columns).each(function (index) { tableString += '\n'; if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') { for (var i = 0; i < frozenColumns[index].length; ++i) { if (!frozenColumns[index][i].hidden) { tableString += '\n'; } } } for (var i = 0; i < columns[index].length; ++i) { if (!columns[index][i].hidden) { tableString += '\n'; } } tableString += '\n'; }); } // 载入内容 var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行 var nl = eval('([' + nameList.substring(1) + '])'); for (var i = 0; i < rows.length; ++i) { tableString += '\n'; $(nl).each(function (j) { var e = nl[j].f.lastIndexOf('_0'); tableString += '\nrows[i][nl[j].f.substring(0, e)]; } else tableString += rows[i][nl[j].f]; tableString += ''; }); tableString += '\n'; } tableString += '\n

Columns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) { tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"'; } if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) { tableString += ' colspan="' + frozenColumns[index][i].colspan + '"'; } if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') { nameList += ',{"f":"' + frozenColumns[index][i].field + '", "a":"' + frozenColumns[index][i].align + '"}'; } tableString += '>' + frozenColumns[0][i].title + '

columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) { tableString += ' rowspan="' + columns[index][i].rowspan + '"'; } if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) { tableString += ' colspan="' + columns[index][i].colspan + '"'; } if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') { nameList += ',{"f":"' + columns[index][i].field + '", "a":"' + columns[index][i].align + '"}'; } tableString += '>' + columns[index][i].title + '

'; window.showModalDialog("/print.htm", tableString, "location:No;status:No;help:No;dialogWidth:800px;dialogHeight:600px;scroll:auto;"); } <script type="text/javascript"> function ChangeToTable(printDatagrid) { var tableString = ''; var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象 var columns = printDatagrid.datagrid("options").columns; // 得到columns对象 var nameList = new Array(); // 载入title if (typeof columns != 'undefined' && columns != '') { $(columns).each(function (index) { tableString += '\n'; if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') { for (var i = 0; i < frozenColumns[index].length; ++i) { if (!frozenColumns[index][i].hidden) { tableString += '\n'; } } } for (var i = 0; i < columns[index].length; ++i) { if (!columns[index][i].hidden) { tableString += '\n'; } } tableString += '\n'; }); } // 载入内容 var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行 for (var i = 0; i < rows.length; ++i) { tableString += '\n'; for (var j = 0; j < nameList.length; ++j) { var e = nameList[j].field.lastIndexOf('_0'); tableString += '\nrows[i][nameList[j].field.substring(0, e)]; } else tableString += rows[i][nameList[j].field]; tableString += ''; } tableString += '\n'; } tableString += '\n

Columns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) { tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"'; } if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) { tableString += ' colspan="' + frozenColumns[index][i].colspan + '"'; } if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') { nameList.push(frozenColumns[index][i]); } tableString += '>' + frozenColumns[0][i].title + '

columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) { tableString += ' rowspan="' + columns[index][i].rowspan + '"'; } if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) { tableString += ' colspan="' + columns[index][i].colspan + '"'; } if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') { nameList.push(columns[index][i]); } tableString += '>' + columns[index][i].title + '

'; return tableString; } function Export(strXlsName, exportGrid) { var f = $(''); var i = $(''); var l = $(''); i.val(ChangeToTable(exportGrid)); i.appendTo(f); l.val(strXlsName); l.appendTo(f); f.appendTo(document.body).submit(); try { document.body.removeChild(f); } catch (e) { } } 打印导出

rowspan="2">编号	rowspan="2">姓名	详细信息			登录信息
地址	电话	邮箱	登录名	密码

名称类型描述默认值 columns（列） array（数组）数据表格列配置对象，查看列属性以获取更多细节。 null frozenColumns（固定列） array（数组）跟列属性一样，但是这些列固定在左边，不会滚动。 null fitColumns（自适应列宽） boolean（布尔型）设置为true将自动使列适应表格宽度以防止出现水平滚动。 false striped（显示条纹） boolean（布尔型）设置为true将交替显示行背景。 false method（方法） string（字符串）请求远程数据的方法类型。 post nowrap（截取） boolean（布尔型）设置为true，当数据长度超出列宽时将会自动截取。 true idField（id字段） string（字符串）表明该列是一个唯一列。 null url（超链接） string（字符串）一个用以从远程站点请求数据的超链接地址。 null loadMsg（载入时信息） string（字符串）当从远程站点载入数据时，显示的一条快捷信息。 Processing, please wait … pagination（分页） boolean（布尔型）设置true将在数据表格底部显示分页工具栏。 false rownumbers（行数） boolean（布尔型）设置为true将显示行数。 false singleSelect（单选模式） boolean（布尔型）设置为true将只允许选择一行。 false pageNumber（当前页码） number（数字）当设置分页属性时，初始化分页码。 1 pageSize（每页记录数） number（数字）当设置分页属性时，初始化每页记录数。 10 pageList（可选择的每页记录数） array 当设置分页属性时，初始化每页记录数列表。 [10,20,30,40,50] queryParams（查询参数） object（对象）当请求远程数据时，发送的额外参数。 {} sortName（默认排序） string（字符串）当数据表格初始化时以哪一列来排序。 null sortOrder（排序顺序） string（字符串）定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。 asc remoteSort（远程排序） boolean（布尔型）定义是否通过远程服务器对数据排序。 true showFooter（显示行底） boolean（布尔型）定义是否显示行底（如果是做统计表格，这里可以显示总计等）。 false rowStyler（行样式） function（函数）返回样式，如：'background:red'，function有2个参数： index：行索引，从0开始. row：对应于该行记录的对象。 loadFilter（载入过滤器） function（函数）返回用以显示的已过滤数据，function有一个参数'data'表示原始数据，你可以将原始数据改变为规范的数据格式，该函数必须返回包含 'total'和'rows'属性的标准数据对象。 editors（编辑模式） object（对象）定义当编辑一行时的编辑模式。 predefined editors view（视图） object（对象）定义数据表格的视图。 default view

更新指定的行， param 参数包含下列特性： index：更新行的索引。 row：行的新数据。代码如下: var grid = $(“#QualityAdd”).datagrid(“updateRow”, { index: gridIndex, row: { Url: “”+r[0].html+”” } }); datagrid 内置对象代码如下: {rows:[{No:001,Order:{no:00101,amount:10}}]} columns: [[ { title: ‘订单编号’, field: ‘no’, width: 100, f

function doUpgradeDataQueryFun(){ var actTypeVal=$("#actType").combobox('getValue'); var actIdVal=$("#actId").combobox('getValue'); var batchNoVal=$("#batchNo").combobox('getValue'); if(typeof

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <titl...

62,046

社区成员

669,049

社区内容

发帖

与我相关

我的任务

javascript云原生企业社区

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章