17:17 提问
怎样在easyui中的datagrid的列中添加combobox并动态获取数据到combobox中?
&table id="data" class="easyui-datagrid" style="width:700height:250px"
url="getAllServer.do" data-options="pageSize:5 ,pageList: [3,5,10]"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true"&
&th field="SERVICENO" width="20"&编号&/th&
&th field="CLIENT" width="50"&客户&/th&
&th field="OUTLINE" width="70"&概要&/th&
&th field="SERVICETYPE" width="30"&服务类型&/th&
&th field="CREATOR" width="30"&创建人&/th&
&th field="CREATETIME" width="40"&创建日期&/th&
&th field="set" width="80"&分配给&/th&
&th field="operate" width="30"&操作&/th&
是动态获取数据的,怎样给倒数第二列添加下拉框
其他相似问题
相关参考资料您当前的位置：&>&&>&&>&jQuery EasyUi中的DataGrid
jQuery EasyUi中的DataGrid
时间： 13:34:25来源：北大青鸟信息编辑：学术部人已阅读
　　o 把HTML表格转到DataGrid
　　o 给DataGrid添加分页
　　o 从DataGrid中获得选中行的数据
　　把HTML表格转到DataGrid
　　接下来教你如何转换表格到DataGrid。《tbody》标签中定义的数据。确定给每一个数据列设置字段名，看个例子：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
　　不需要javascript代码就能看到这个效果：
　　你也可以定义一个复合表头：
　　给DataGrid添加分页
　　这个例子显示如何能从服务器中调用数据，如何添加分页到DataGrid中。
　　从远程服务器中调用数据，设置url属性，服务器会返回JSON格式数据。获得更多数据格式。
　　建立&table&标签
&&&&&&&&&&&&&&&&&&&&&&&&
　　我们定义DataGrid列并且设置pagination属性为true，这样可以在DataGrid上产生分页栏按钮。分页发送2个参数到服务器。
　　page: 页号，从1开始。
　　rows: 每页的列数。
　　我们使用etmvc framework编写后台服务代码，url被映射到DataController类和getItems方法。
　　定义数据模型的例子
　　编写控制代码
　　数据库配置
　　建立MySQL数据库
　　从'/db/item.sql'导入测试表数据，表名是'item'.
　　按需要改变数据库配置，配置文件在/WEB-INF/classes/activerecord.properties中。
　　运行程序
　　得到DataGrid选中行
　　这个例子显示了如何得到选中行数据。
[!--temp.baiduShare02--]
你可能会喜欢：
精品IT课程 SERVICE
北大青鸟java软件开发工程师课程是北大青鸟学士后品牌下的主打课程...
北大青鸟.net开发工程师课程采用情景式教学方式，寓教于乐，具有很强的趣味性...
ACCP是北大青鸟最经典的一套课程，专门针对18周岁、高中以上学历的人群设计...
网络工程师能够进行网络系统的规划、设计以及网络设备软硬件的安装调试的工作...
北大青鸟学士后网络营销师是全国首套成体系、系统讲解网络营销的专业课程...
高中生就业解决方案
大学生就业解决方案
在职提升解决方案
点击【】免费定制个人学习解决方案easyui 中的datagrid导出excel问题？
[问题点数：80分，结帖人daoyuanjiao]
easyui 中的datagrid导出excel问题？
[问题点数：80分，结帖人daoyuanjiao]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。页面导航：
→ 正文内容 datagrid框架的删除添加与修改
datagrid框架的删除添加与修改
今天说下批量删除，双击表单修改、选中行修改，增加行修改，再有就是扩展editor的方法，无需废话，直接上代码，代码中的注释写的很详细：
代码如下:&script type="text/javascript" charst="utf-8"&var editFlag =//设置一个编辑标记//因为layout框架指向href时，只取html页面body中间的部分，所以该页面这样写即可//有datagrid包含属性较多，所以尽量使用js的方式初始化datagrid框架$(function () {$("#dg").datagrid({url: "GetJson.ashx", //指向一个一般处理程序或者一个控制器，返回数据要求是Json格式，直接赋值Json格式数据也可，我以demo中自带的Json数据为例，就不写后台代码了，但是我会说下后台返回的注意事项iconCls: "icon-add",fitColumns: false, //设置为true将自动使列适应表格宽度以防止出现水平滚动,false则自动匹配大小//toolbar设置表格顶部的工具栏，以数组形式设置idField: 'id', //标识列，一般设为id，可能会区分大小写，大家注意一下loadMsg: "正在努力为您加载数据", //加载数据时向用户展示的语句pagination: true, //显示最下端的分页工具栏rownumbers: true, //显示行数 1，2，3，4...pageSize: 10, //读取分页条数，即向后台读取数据时传过去的值pageList: [10, 20, 30], //可以调整每页显示的数据，即调整pageSize每次向后台请求数据时的数据//由于datagrid的属性过多，我就不每个都介绍了，如有需要，可以看它的APIsortName: "name", //初始化表格时依据的排序 字段 必须和数据库中的字段名称相同sortOrder: "asc", //正序columns: [[{field: 'code', title: 'Code', width: 100,editor: {//设置其为可编辑type: 'validatebox',//设置编辑样式 自带样式有：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree 可自行扩展options: {}}},{field: 'name', title: 'Name', width: 100, sortable: true,editor: {//设置其为可编辑type: 'validatebox',//设置编辑格式options: {required: true//设置编辑规则属性}}},//sortable:true点击该列的时候可以改变升降序{field: 'addr', title: 'addr', width: 100,editor: {//设置其为可编辑type: 'datetimebox',//这里我们将进行一个datetimebox的扩展options: {required: true//设置编辑规则属性}}}]],//这里之所以有两个方括号，是因为可以做成水晶报表形式，具体可看demotoolbar: [{//在dategrid表单的头部添加按钮text: "添加",iconCls: "icon-add",handler: function () {if (editFlag != undefined) {$("#dg").datagrid('endEdit', editFlag);//结束编辑，传入之前编辑的行}if (editFlag == undefined) {//防止同时打开过多添加行$("#dg").datagrid('insertRow', {//在指定行添加数据，appendRow是在最后一行添加数据index: 0, // 行数从0开始计算row: {code: '',name: '请输入姓名',addr: ''}});$("#dg").datagrid('beginEdit', 0);//开启编辑并传入要编辑的行editFlag = 0;}}}, '-', {//'-'就是在两个按钮的中间加一个竖线分割，看着舒服text: "删除",iconCls: "icon-remove",handler: function () {//选中要删除的行var rows = $("#dg").datagrid('getSelections');if (rows.length & 0) {//选中几行的话触发事件$.message.confirm("提示", "您确定要删除这些数据吗？", function (res) {//提示是否删除if (res) {var codes = {};for (var i = 0; i & rows. i++) {codes.push(rows[i].code);}<(codes.join(','));//拼接字符串并传递到后台处理数据，循环删除，成功后刷新datagrid}});}}}, '-', {text: "修改",iconCls: "icon-edit",handler: function () {//选中一行进行编辑var rows = $("#dg").datagrid('getSelections');if (rows.length == 1) {//选中一行的话触发事件if (editFlag != undefined) {$("#dg").datagrid('endEdit', editFlag);//结束编辑，传入之前编辑的行}if (editFlag == undefined) {var index = $("#dg").datagrid('getRowIndex', rows[0]);//获取选定行的索引$("#dg").datagrid('beginEdit', index);//开启编辑并传入要编辑的行editFlag =}}}}, '-', {text: "保存",iconCls: "icon-save",handler: function () {$("#dg").datagrid('endEdit', editFlag);}}, '-', {text: "撤销",iconCls: "icon-redo",handler: function () {editFlag =$("#dg").datagrid('rejectChanges');}}, '-'],onAfterEdit: function (rowIndex, rowData, changes) {//在添加完毕endEdit，保存时触发<(rowData);//在火狐浏览器的控制台下可看到传递到后台的数据，这里我们就可以利用这些数据异步到后台添加，添加完成后，刷新datagrideditFlag =//重置}, onDblClickCell: function (rowIndex, field, value) {//双击该行修改内容if (editFlag != undefined) {$("#dg").datagrid('endEdit', editFlag);//结束编辑，传入之前编辑的行}if (editFlag == undefined) {$("#dg").datagrid('beginEdit', rowIndex);//开启编辑并传入要编辑的行editFlag = rowI}}});});
//点击查找按钮出发事件function searchFunc() {alert("123");$("#dg").datagrid("load", sy.serializeObject($("#searchForm").form()));//将searchForm表单内的元素序列为对象传递到后台//这里介绍reload的使用，使用reload时，会默认记住当前页面，当点击查询时，如果我们查到的数据只有三条，我们每页显示10挑数据，当前页码是2，那么我们将无法在当前页面看到我们查询出的结果，只有将页面向前跳转才会看到，但是用load就不会出现这种情况}
//点击清空按钮出发事件function clearSearch() {$("#dg").datagrid("load", {});//重新加载数据，无填写数据，向后台传递值则为空$("#searchForm").find("input").val("");//找到form表单下的所有input标签并清空}&/script&&div class="easyui-tabs" fit="true" border="false"&&div title="数据展示表格" border="false" fit="true"&&div class="easyui-layout" fit="true" border="false"&&!--由于查询需要输入条件，但是以toolbar的形式不好，所以我们在Layout框架的头部north中书写查询的相关信息--&&!-- 这里我们尽量使其展示的样式与toolbar的样式相似，所以我们先查找toolbar的样式，并复制过来--&&div data-options="region:'north',title:'高级查询'" style="height: 100 background: #F4F4F4;"&&form id="searchForm"&&table&&tr&&th&用户姓名：&/th&&td&&input name="name" /&&/td&&/tr&&tr&&th&创建开始时间&/th&&td&&input class="easyui-datetimebox" editable="false" name="subStartTime" /&&/td&&!--由于datebox框架上面的数据必须是时间格式的，所以我们用editable="false"来禁止用户手动输入，以免报错--&&th&创建结束时间&/th&&td&&input class="easyui-datetimebox" editable="false" name="nsubEndTimeame" /&&/td&&td&&a class="easyui-linkbutton" href="javascript:void(0);" onclick="searchFunc();"&查找&/a&&/td&&td&&a class="easyui-linkbutton" href="javascript:void(0);" onclick="clearSearch();"&清空&/a&&/td&&/tr&&/table&&/form&&/div&&div data-options="region:'center',split:false"&&table id="dg"&&/table&&/div&&/div&&/div&&/div&
扩展editor方法：datetimebox
代码如下:$(function () {/*扩展Editors的datetimebox方法*/$.extend($.fn.datagrid.defaults.editors, {datetimebox: {//为方法取名init: function (container, options) {var editor = $('&input /&').appendTo(container);options.editable =//设置其不能手动输入editor.datetimebox(options);},getValue: function (target) {//取值return $(target).datetimebox('getValue');},setValue: function (target, value) {//设置值$(target).datetimebox('setValue', value);},resize: function (target, width) {$(target).datetimebox('resize', width);},destroy: function (target) {$(target).datetimebox('destroy');//销毁生成的panel}}});});
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910