EasyUI Combogrid教程(Enter键查询)
jqueryeasyuicombogrid集成分页、按键示例
jQuery EasyUI ComboGrid 集成分页、按键示例需求：1、下拉框下拉时出现表格；2、表格带分页功能；3、可以使用向上键、向下键在表格中移动选择行数据；4、可以使用回车键在表格中选中行数据；5、在下拉框的文本框中输入内容，能查询表格；6、下拉框的文本框的内容变化时，表格数据按分页设置显示效果如下：图1、图2、图3、图4、思路：很简单，分拆为combo、datagrid、pagination三个组件分别操作，注意结合的操作就好。
在制作的过程中，比较头痛的是整合，大体上代码中都加了注释，有些情况大家自己试一下就明白为什么要那样做了，比如：在分页的页改变事件中要设置表格的pageSize，是为了在文本框变化时，能强制表格按分页的pageSize显示数据。
代码：1、html代码[html] view plaincopy<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns="/1999/xhtml"> <head> <title></title> <link rel="external nofollow"href="style/js/easyui/themes/metro-green/easyui.css"rel="stylesheet" type="text/css" /> <linkrel="external nofollow"href="style/js/easyui/themes/icon.css" rel="stylesheet" type="text/css" /> <scriptsrc="style/js/easyui/jquery.min.js"type="text/javascript"></script> <scriptsrc="style/js/easyui/jquery.easyui.min.js"type="text/javascript"></script> <scriptsrc="style/js/easyui/locale/easyui-lang-zh_CN.js"type="text/javascript"></script> <scriptsrc="style/js/biz/comboGridBiz.js"type="text/javascript"></script> </head><body> <h3>EasyUI ComboGrid 集成分页示例</h3> <div><input id="cg"style="width:150px" /><input type="text"id="txtGender" /></div> <inputtype="hidden" id="hdKeyword" /> </body></html> 2、js代码[javascript] view plaincopy$(function (){ $('#cg').combogrid({ panelWidth: 400, idField: 'PersonId', //ID字段textField: 'PersonName', //显示的字段url:"ashx/ComboGridHandler.ashx?action=search", fitColumns: true, striped: true,editable: true, pagination: true, //是否分页rownumbers: true, //序号collapsible: false, //是否可折叠的fit: true, //自动大小method:'post', columns: [[ { field: 'PersonId', title: '用户编号', width: 80, hidden: true },{ field: 'PersonName', title: '用户名称', width: 150 },{ field: 'Gender', title: '用户性别', width:150 } ]], keyHandler:{ up: function () { //【向上键】押下处理//取得选中行var selected =$('#cg').combogrid('grid').datagrid('getSelected');if (selected) { //取得选中行的rowIndex var index =$('#cg').combogrid('grid').datagrid('getRowIndex', selected); //向上移动到第一行为止if (index> 0){ $('#cg').combogrid('grid').dat agrid('selectRow', index -1); } } else{ var rows =$('#cg').combogrid('grid').datagrid('getRows');$('#cg').combogrid('grid').datagrid('selectRow', rows.length - 1); } },down: function () { //【向下键】押下处理//取得选中行var selected =$('#cg').combogrid('grid').datagrid('getSelected');if (selected) { //取得选中行的rowIndex var index =$('#cg').combogrid('grid').datagrid('getRowIndex', selected); //向下移动到当页最后一行为止if (index <$('#cg').combogrid('grid').datagrid('getData').rows.length - 1){ $('#cg').combogrid('grid').dat agrid('selectRow', index +1); } } else{ $('#cg').combogrid('grid').datagri d('selectRow', 0); } }, enter: function () { //【回车键】押下处理//设置【性别】文本框的内容为选中行的的性别字段内容$('#txtGender').val($('#cg').combogrid('grid').datagrid('getS elected').Gender); //选中后让下拉表格消失$('#cg').combogrid('hidePanel'); },query: function (keyword) { //【动态搜索】处理//设置查询参数var queryParams = $('#cg').combogrid("grid").datagrid('options').queryParams; queryParams.keyword = keyword;$('#cg').combogrid("grid").datagrid('options').queryParams = queryParams; //重新加载$('#cg').combogrid("grid").datagrid("reload");$('#cg').combogrid("setValue", keyword);//将查询条件存入隐藏域$('#hdKeyword').val(keyword); }}, onSelect: function () { //选中处理$('#txtGender').val($('#cg').combogrid('grid').datagrid('getS elected').Gender); } }); //取得分页组件对象var pager =$('#cg').combogrid('grid').datagrid('getPager'); if (pager){ $(pager).pagination({ pageSize: 10, //每页显示的记录条数，默认为10 pageList: [10, 5, 3], //可以设置每页记录条数的列表beforePageText: '第', //页数文本框前显示的汉字afterPageText: '页共{pages} 页',displayMsg: '当前显示{from} - {to} 条记录共{total} 条记录', //选择页的处理onSelectPage: function (pageNumber, pageSize){ //按分页的设置取数据getData(pageNumber, pageSize); //设置表格的pageSize属性，表格变化时按分页组件设置的pageSize显示数据$('#cg').combogrid("grid").datagrid('options').pageSize = pageSize; //将隐藏域中存放的查询条件显示在combogrid的文本框中$('#cg').combogrid("setValue", $('#hdKeyword').val()); $('#txtGender').val(''); }, //改变页显示条数的处理//（处理后还是走onSelectPage事件，所以设置也写到onSelectPage事件中了）onChangePageSize: function () { },//点击刷新的处理onRefresh: function (pageNumber, pageSize) { //按分页的设置取数据getData(pageNumber, pageSize); //将隐藏域中存放的查询条件显示在combogrid的文本框中$('#cg').combogrid("setValue", $('#hdKeyword').val()); $('#txtGender').val(''); } }); } var getData = function (page, rows){ $.ajax({ type: "POST",url: "ashx/ComboGridHandler.ashx?action=search", data: "page=" + page + "&rows=" + rows +"&keyword=" + $('#hdKeyword').val(),error: function (XMLHttpRequest, textStatus, errorThrown){ alert(textStatus);$.messager.progress('close'); }, success: function (data){ $('#cg').combogrid('grid').datagrid('lo adData', data); } }); }; });3、ashx代码[csharp] view plaincopy/// <summary> /// ComboGridHandler 的摘要说明/// </summary> public class ComboGridHandler : IHttpHandler { /// <summary> /// /// </summary>/// <param name="context"></param>public void ProcessRequest(HttpContext context){ context.Response.ContentType = "application/json"; string action =context.Request.Params["action"]; //页数int PageNum = Convert.ToInt32(context.Request["page"]); //每一页多少条数据int Record =Convert.ToInt32(context.Request["rows"]); //模拟数据List<Person> list = MockData(); Dictionary<string, object> resultDic = new Dictionary<string, object>(); switch(action) { case "search":var condition = context.Request["keyword"] ??string.Empty; List<Person> result = (from item in list where item.PersonName.Contains(condition) //条件查询select item).ToList<Person>();resultDic.Add("total", result.Count);resultDic.Add("rows", (result.Skip(Record * (PageNum - 1)).Take(Record)).ToList());break; } JavaScriptSerializer serializer = new JavaScriptSerializer();context.Response.Write(serializer.Serialize(resultDic));} public bool IsReusable { get { return false; } }/// <summary> /// 模拟数据///</summary> /// <returns></returns> public List<Person> MockData(){ List<Person> list = newList<Person>() { newPerson(){ PersonId = Guid.NewGuid().ToString(), PersonName = "叶宇", Gender = "女" },new Person(){ PersonId = Guid.NewGuid().ToString(),PersonName = "张兄家", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张洋", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "洪自军", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "王生杰", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "吴庆庆", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "武建昌", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘瑞", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张辽", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张颌", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘备", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "刘禅", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(),PersonName = "刘表", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张震岳", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张学友", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张信哲", Gender = "男" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张悬", Gender = "女" },new Person(){ PersonId = Guid.NewGuid().ToString(), PersonName = "张惠妹", Gender = "女" } }; return list; } }4、实体类代码[csharp] view plaincopy[Serializable] public class Person { public string PersonId { get; set; } public string PersonName { get; set; } public string Gender { get; set; } } ——————————————————————————抛砖完毕，还请聪明的你给出更好更漂亮的解决方案哦且做且珍惜附件：完整代码下载转载自：/%E3%80%90%E5%8E%9F%E3% 80%91easyui-combogrid-%E9%9B%86%E6%88%90%E5 %88%86%E9%A1%B5%E3%80%81%E6%8C%89%E9% 94%AE%E7%A4%BA%E4%BE%8B%E9%9B%86%E6% 88%90%E5%88%86%E9%A1%B5%E3%80%81%E6%8 C%89%E9%94%AE%E7%A4%BA%E4%BE%8B。
详解jqueryeasyui之datagrid使用参考
详解jqueryeasyui之datagrid使⽤参考本⽂介绍了jquery easyui之datagrid使⽤，具体如下：创建datagrid在页⾯上添加⼀个div或table标签，然后⽤jquery获取这个标签，并初始化⼀个datagrid。
代码如下：页⾯上的div标签：<div id="magazineGrid"></div>js代码：$('#magazineGrid').datagrid({height: 340,url: 'url',method: 'POST',queryParams: { 'id': id },idField: '产品ID',striped: true,fitColumns: true,singleSelect: false,rownumbers: true,pagination: false,nowrap: false,pageSize: 10,pageList: [10, 20, 50, 100, 150, 200],showFooter: true,columns: [[{ field: 'ck', checkbox: true },{ field: '刊名', title: '刊名', width: 180, align: 'left' },{ field: '类别', title: '类别', width: 150, align: 'left' },{ field: '⽉份', title: '⽉份', width: 100, align: 'left' },{ field: '期次', title: '期次', width: 100, align: 'left' },{ field: '价格', title: '价格', width: 100, align: 'right' },{ field: '订阅数', title: '订阅数', width: 100, align: 'right' },{ field: '库存数', title: '库存数', width: 100, align: 'right' },{ field: '邮寄⽅式', title: '邮寄⽅式', width: 80, align: 'left' },{ field: '数量', title: '数量', width: 80, align: 'left',editor: {type: 'numberbox',options: {min: 0,precision: 0}}}]],onBeforeLoad: function (param) {},onLoadSuccess: function (data) {},onLoadError: function () {},onClickCell: function (rowIndex, field, value) {}});ajax请求返回的数据格式datagrid在创建完成后会根据url请求数据，这是通过ajax来完成的。
easyui checkbox用法 -回复
easyui checkbox用法-回复EasyUI是一个基于jQuery的开源UI库，提供了丰富的界面组件和易用的API，使得开发者可以轻松地构建各种Web应用程序。
在EasyUI 中，checkbox是其中之一的组件，在本文中我们将重点讨论EasyUI checkbox的用法。
1. 引入EasyUI库首先，在使用EasyUI checkbox之前，我们需要在项目中引入EasyUI 库。
可以在EasyUI官网（html<head><script src="jquery.js"></script><script src="easyui.js"></script></head>2. 创建checkbox组件通过HTML的<input type="checkbox">标签可以创建一个简单的checkbox，但是EasyUI提供了更丰富的操作和样式。
使用EasyUI checkbox，我们可以通过调用checkbox()方法来创建一个checkbox 组件，并为其传入一些配置参数以满足我们的需求。
例如：javascriptlabel: '复选框'});在上述代码中，我们使用了id为"checkbox1"的元素创建了一个checkbox组件，并设置了label属性为"复选框"。
3. 设置checkbox属性除了label属性，EasyUI checkbox还提供了其他一些常用的属性，这些属性可以通过在checkbox()方法的配置参数中指定来进行设置。
下面是一些常用的checkbox属性：- checked: 设置checkbox是否选中。
可以将该属性设置为true或false，默认值为false。
- disabled: 设置checkbox是否禁用。
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
一篇关于JQueryEasyUI学习之datagrid 添加、修改、删除学习笔记教程有需要了解的朋友可参考本的笔记,批量删除，双击表单修改、选中行修改，增加行修改，再有就是扩展editor的方法，无需废话，直接上代码，代码中的注释写的很详细<script type="text/javascript" charst="utf-8">var editFlag = undefined;//设置一个编辑标记//因为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//设置编辑规则属性}}}]],//这里之所以有两个方括号，是因为可以做成水晶报表形式，具体可看demo toolbar: [{//在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.length; 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 = index;}}}}, '-', {text: "保存",iconCls: "icon-save",handler: function () {$("#dg").datagrid('endEdit', editFlag);}}, '-', {text: "撤销",iconCls: "icon-redo",handler: function () {editFlag = undefined;$("#dg").datagrid('rejectChanges');}}, '-'],onAfterEdit: function (rowIndex, rowData, changes) {//在添加完毕endEdit，保存时触发(rowData);//在火狐浏览器的控制台下可看到传递到后台的数据，这里我们就可以利用这些数据异步到后台添加，添加完成后，刷新datagrideditFlag = undefined;//重置}, onDblClickCell: function (rowIndex, field, value) {//双击该行修改内容if (editFlag != undefined) {$("#dg").datagrid('endEdit', editFlag);//结束编辑，传入之前编辑的行}if (editFlag == undefined) {$("#dg").datagrid('beginEdit', rowIndex);//开启编辑并传入要编辑的行editFlag = rowIndex;}}});});//点击查找按钮出发事件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: 100px; 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 = false;//设置其不能手动输入editor.datetimebox(options);return editor;},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}}});});以上所述是小编给大家介绍的JQuery EasyUI datagrid 添加、修改、删除操作的全部叙述，希望对大家有所帮助。
combo控件在grid中的用法
combo控件在grid中的用法请参考：如何在GRID中加入复选框？*-----------------------------方法一：1、把GRID的列数改为> 0 &&方法二不需要此项2、右键单击GRID，编辑，在工具条中把checkbox拿到要加入复选框的列中3、右键单击GRID，编辑，然后选择加入复选框的列。
在属性窗口上的“数据”页面上把Grid的Colum（加入复选框的Column）的currentcontrol值改成check1，然后根据你的需要修改Sparse的值，来指定CurrentControl 属性是影响列对象中的全部单元，还是仅影响列对象中的活动单元。
方法二：在Grid的INIT事件中：WITH This.column4.addobject( "Check1 ", "CheckBox ").currentcontrol= 'Check1 '.sparse=.f..Check1.Caption= ' '.Check1.visible=.t.ENDWITH*********************************************************** ********同理可向GRID中添加日历控件及COMBOBOX 控件等GRID的INIT事件WITH This.column3.addobject( "Combo100 ", "ComboBox ").currentcontrol= 'Combo100 '.sparse=.f..Combo100.RowSourceType=0.Combo100.visible=.t.ENDWITHselect 表名 &&此表可以是Grid的数据源也可以不是Grid的数据源scanbo100.additem(字段名)endscan--------------------------------------------------------------------------在表格列中显示控件除了在表格中显示字段数据，还可以在表格的列中嵌入控件，这样就为用户提供嵌入的文本框、复选框、下拉列表框、微调按钮和其他控件。
ComboBox（组合框）控件的使用方法
ComboBox（组合框）控件的使⽤⽅法Combo Box (组合框)控件很简单，可以节省空间。
从⽤户⾓度来看，这个控件是由⼀个⽂本输⼊控件和⼀个下拉菜单组成的。
⽤户可以从⼀个预先定义的列表⾥选择⼀个选项，同时也可以直接在⽂本框⾥⾯输⼊⽂本。
下⾯的例⼦简要说明如何利⽤ MFC CComboBox Class来操作字符串列表。
1、定义控件对应变量假定已经创建了⼀个Dialog，并且从控件⼯具箱将 Combo Box 控件拖放到上⾯。
打开 Class Wizard，添加控件对应变量，如：CComboBox m_cbExamble;在后⾯的代码中会不断使⽤这个变量。
2、向控件添加 Items1) 在Combo Box控件属性的Data标签⾥⾯添加，⼀⾏表⽰Combo Box下拉列表中的⼀⾏。
换⾏⽤ctrl+回车。
2) 利⽤函数 AddString() 向 Combo Box 控件添加 Items，如：m_cbExample.AddString(“StringData1”);m_cbExample.AddString(“StringData2”);m_cbExample.AddString(“StringData3”);3) 也可以调⽤函数 InsertString() 将 Item 插⼊指定位置 nIndex，如：m_cbExample.InsertString( nIndex, “StringData” );3、从控件得到选定的Item假设在控件列表中已经选定某项，现在要得到被选定项的内容，⾸先要得到该项的位置，然后得到对应位置的内容。
这⾥会⽤到两个函数，如：int nIndex = m_cbExample.GetCurSel();CString strCBText;m_cbExample.GetLBText( nIndex, strCBText);这样，得到的内容就保存在 strCBText 中。
ligerUI 关于ligerComboBox 自动完成用键盘上下键和回车键进行操作
我们改进了 combobox 对本地数据的支持！现在我们又有了新的问题那就是combobox 对自动完成后的数据无法用键盘去操作比如数据显示出来后！无法使用键盘上下键或者回车键进行选择! 所以我们今天的工作主要是为了改进源代码使他能够完成我们的需要！1，首先增加一个 selectIndoex 字段用于当前选中的项目$boBox = {resize: true,isMultiSelect: false,isShowCheckBox: false,columns: null,selectBoxWidth: null,selectBoxHeight: 120,selectIndex:0, // 新增当前选中索引onBeforeSelect: false,onSelected: null,initValue: null,initText: null,…………………………………… //下面没改动的就不帖了……………………………………2，然后在_addClickEven 后面加上2个事件_addClickEven: function (){ …………………………………………………………这些代码都省略了…………………………},setSelectState:function(index,newdata){ //设置选中状态var g = this, p = this.options;if(g.grid){if(newdata){var rowobj = g.grid.getRowObj(newdata.Rows[p.selectIndex]['__id']);$(rowobj).addClass("l-selected");return}var rowobj = g.grid.getRowObj(p.grid.data.Rows[p.selectIndex]['__id']);$(rowobj).addClass("l-selected");}},clearSelectState:function(index,newdata){//取消选中状态var g = this, p = this.options;if(newdata){for(var o in newdata.Rows){var rowobj1 = g.grid.getRowObj(newdata.Rows[o]['__id']);if($(rowobj1).hasClass('l-selected')){$(rowobj1).removeClass('l-selected');}}return}for(var o in p.grid.data.Rows){var rowobj1 = g.grid.getRowObj(p.grid.data.Rows[o]['__id']);if($(rowobj1).hasClass('l-selected')){$(rowobj1).removeClass('l-selected');}}},3，在setGrid：function(grid)事件中的最后加上一句代码//表格setGrid: function (grid){………………………………………………………………………………省略了以上所有代码g.grid.refreshSize();g.setSelectState(p.selectIndex); //新增选中状态}4，在_toggleSelectBox: function (isHide)事件中加上3段代码_toggleSelectBox: function (isHide){var g = this, p = this.options;if (!g || !p) return;var textHeight = g.wrapper.height();g.boxToggling = true;if (isHide){g.clearSelectState(p.selectIndex); //清楚选中状态classp.selectIndex = 0; //每次关闭创建清理选中状态if (p.slide){g.selectBox.slideToggle('fast', function (){g.boxToggling = false;});}else{g.selectBox.hide();g.boxToggling = false;}}else{g.setSelectState(p.selectIndex); //打开box时设置选中状态g.updateSelectBoxPosition();if (p.slide){g.selectBox.slideToggle('fast', function (){g.boxToggling = false;if (!p.isShowCheckBox && $('td.l-selected', g.selectBox).length > 0){var offSet = ($('td.l-selected', g.selectBox).offset().top - g.selectBox.offset().top); $(".l-box-select-inner", g.selectBox).animate({ scrollTop: offSet });}});}else{g.selectBox.show();g.boxToggling = false;if (!g.tree && !g.grid && !p.isShowCheckBox && $('td.l-selected', g.selectBox).length > 0){var offSet = ($('td.l-selected', g.selectBox).offset().top - g.selectBox.offset().top); $(".l-box-select-inner", g.selectBox).animate({ scrollTop: offSet });}}}g.isShowed = g.selectBox.is(":visible");g.trigger('toggle', [isHide]);g.trigger(isHide ? 'hide' : 'show');}5，在_setAutocomplete: function (value) 事件中加入了主要逻辑判断我把全部源码帖出来_setAutocomplete: function (value) {var g = this, p = this.options;if (!value) return;g.inputText.removeAttr("readonly");var lastText = g.inputText.val();var newrow = {"Rows":[]}; //创建一个新的本地数据副本g.inputText.keyup(function (event){setTimeout(function (){if(g.isShowed) //检测box是否打开{var e = (e||event);if(e.keyCode == 13){ //检测到回车键if(lastText != ""){if(newrow.Rows[0]){ //查找副本数据g.inputText.val(newrow.Rows[p.selectIndex][p.textField]);g.selectBox.hide();}}else{if(p.grid.data.Rows[0]){g.inputText.val(p.grid.data.Rows[p.selectIndex][p.textField]);g.selectBox.hide();}}}if(e.keyCode == 40){ //检测到向下键if(lastText != ""){if(newrow.Rows.length > p.selectIndex){g.clearSelectState(p.selectIndex,newrow);p.selectIndex = p.selectIndex +1;g.setSelectState(p.selectIndex,newrow);}return}if(p.grid.data.Rows.length > p.selectIndex){g.clearSelectState(p.selectIndex);p.selectIndex = p.selectIndex +1;g.setSelectState(p.selectIndex);}}if(e.keyCode == 38){//检测到向上键if(lastText != ""){if(p.selectIndex > 0){g.clearSelectState(p.selectIndex,newrow);p.selectIndex = p.selectIndex -1;g.setSelectState(p.selectIndex,newrow);}return}if(p.selectIndex >0){g.clearSelectState(p.selectIndex);p.selectIndex = p.selectIndex -1;g.setSelectState(p.selectIndex);}}if (lastText == g.inputText.val()) return;newrow = {"Rows":[]};p.initValue = "";g.valueField.val("");lastText = g.inputText.val();if (p.url){g.setParm('key', g.inputText.val());g.set('url', p.url);g.selectBox.show();}else if(p.data){var rows = p.data;for(var o in newrow){var index = newrow[o][p.SearchField].toString();if(index.indexOf(lastText) >= 0){newrow.push(rows[o])}}g.set('data',newrows);g.reload();}else if (p.grid){if(p.grid.data) //判断是否设置了本地数据{var rows = p.grid.data.Rows; //获取本地数据所有行for(var o in rows){ //下面就是本地数据匹配var no = rows[o][p.SearchField].toString(); //这么我配备的是我的本地数据的一个No 字段我的行数组大概是这样的{Id:0,No:'001',Name:'小明'}var index =no.indexOf(lastText);if(index >= 0 ){newrow.Rows.push(rows[o]); //如果本行包含了用户输入的数据那么加入副本数据}}g.grid.setOptions({data:newrow}); //匹配完毕设置新的本地数据g.grid.loadData();//载入新数据p.selectIndex = 0;g.setSelectState(p.selectIndex);return;}g.grid.setParm('key', g.inputText.val());g.grid.reload();p.selectIndex = 0;g.setSelectState(p.selectIndex);}lastText = g.inputText.val();//}}, 1);});}});。
easyui datagrid
1.Datagrid实现添加查询参数，翻页功能1.1.初始化表格Html<div region="center" border="false" style="padding:0px 3px 0px 3px;margin:0px;"><table id="test"></table></div>Script初置化gird$(function(){loadgrid();//loadcombobox(null);});function loadgrid(){$('#test').datagrid({title:'任免信息列表',fit:true,nowrap: false,striped:false,//url:'rm.json',url:'http://127.0.0.1:8080/web/AppAndRemoveServer.server',queryParams:{},sortName: 'appandremove_id',sortOrder: 'asc',remoteSort: false,idField:'appandremove_id',frozenColumns:[[{field:'ck',checkbox:true}]],columns:[[{field:'appandremove_id',title:'任免批次编号',width:200,sortable:true},{field:'batch_name',title:'任免批次名称',width:240,sortable:true},{field:'batch_no',title:'任免批次编号',width:100,sortable:true},{field:'recorder_date',title:'登记时间',width:120,sortable:true},{field:'recorder_id',title:'登记人',width:100,sortable:true},{field:'state',title:'状态',width:100,sortable:true},{field:'memo',title:'备注',width:300}]],pagination:true,pageNumber:1,pageSize:5,pageList:[5,10],//singleSelect:true,rownumbers:true});}1.2.效果图当点击分页控件的按钮时，会根据绑定的url，向服务器发送请求,1.3.服务端接收rows、page、order、sort参数参数名称是easyui起的，值也是自动绑定可以在服务端通过request.getParameterNames();查看有什么参数接收参数值if(null!=request.getParameter("rows")) {pageRows=Integer.parseInt(request.getParameter("rows").toString() );}if(null!=request.getParameter("page")) {page=Integer.parseInt(request.getParameter("page").toString());}if(null!=request.getParameter("order")) {order=request.getParameter("order").toString();}if(null!=request.getParameter("sort")) {order=request.getParameter("sort").toString();}然后拼装sql语句实现分页。
第二百二十四节，jQueryEasyUI，ComboGrid（数据表格下拉框）组件
第⼆百⼆⼗四节，jQueryEasyUI，ComboGrid（数据表格下拉框）组件jQuery EasyUI，ComboGrid(数据表格下拉框)组件学习要点： 1.加载⽅式 2.属性列表 3.⽅法列表本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的使⽤⽅法，这个组件依赖于 Combo(⾃定义下拉框)和 DataGrid(数据表格)组件。
⼀．加载⽅式class 加载⽅式<select id="box" class="easyui-combogrid" name="dept"style="width:250px;"data-options="panelWidth:450,value:'请选择⼀个值',idField:'id',textField:'user',url:'content.json',columns:[[{field:'user',title:'帐号',width:120},{field:'email',title:'邮箱',width:120},{field:'date',title:'创建时间',width:120},]]"></select>JS 加载⽅式<input id="box" name="user" value="请选择⼀个⽤户">jscombogrid()将⼀个input元素执⾏数据表格下拉框组件$(function () {$('#box').combogrid({panelWidth: 600,idField: 'id',textField: 'user',url: 'content.json',columns: [[{field: 'id',title: '编号',width: 120,},{},{field: 'date',title: '创建时间',width: 120,}]]});});⼆．属性列表注意：Combo(⾃定义下拉框)组件，⽤⾃定义下拉框的属性，⽅法，事件 DataGrid(数据表格)组件⽤数据表格的属性，⽅法，事件loadMsg string 在数据表格加载远程数据的时候显⽰消息。
easyui datagrid 调用函数
easyui datagrid 调用函数在使用easyui datagrid组件时，经常会遇到需要在特定时机调用函数的情况，比如在加载数据完成后进行一些处理，或者在用户进行操作时触发一些功能。
这时就需要使用easyui datagrid的调用函数功能来实现。
1. 使用datagrid的onLoadSuccess事件在easyui datagrid加载数据完成后，会触发onLoadSuccess事件，我们可以通过该事件来调用我们需要的函数。
```javascript$('#dg').datagrid({url: 'data.json',onLoadSuccess: function(data){// 在数据加载完成后调用的函数doSomething();}});```在上面的例子中，当datagrid加载数据完成后，会调用名为doSomething的函数来处理一些逻辑。
这样就实现了在数据加载完成后调用函数的效果。
2. 手动调用函数除了依赖事件来触发函数调用，我们也可以手动调用函数来实现需要的功能。
```javascriptfunction doSomething(){// 这里是需要执行的逻辑}// 手动调用函数doSomething();```在上面的例子中，我们直接调用了名为doSomething的函数，这样就实现了手动调用函数的效果。
这种方式适用于需要在多个地方调用同一个函数的情况。
3. 利用datagrid的方法来调用函数除了上面两种方式，我们还可以利用easyui datagrid提供的方法来调用函数。
我们可以通过datagrid的getSelected方法来获取当前选中的行，然后再调用相应的函数来处理数据。
```javascript$('#dg').datagrid('getSelected', function(row){// 获取当前选中的行数据后调用的函数doSomething(row);});```在上面的例子中，我们通过调用datagrid的getSelected方法来获取当前选中的行数据，并且将其作为参数传递给doSomething函数来进行处理。
easyui checkbox用法 -回复
easyui checkbox用法-回复EasyUI是一款流行的前端UI框架，致力于简化开发人员在构建网站和应用程序中的用户界面的工作。
其中的Checkbox组件是常用的表单元素之一，用于多选或全选的功能。
本文将深入介绍EasyUI Checkbox的用法，从基本用法到高级用法，以及常见问题的解决方法。
一、基本用法1. 引入EasyUI库和样式文件：在页面中引入EasyUI库和样式文件，确保库文件正确加载。
html<link rel="stylesheet" type="text/css" href="easyui.css"><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jquery.easyui.min.js"></script>2. 创建HTML结构：使用HTML创建Checkbox的结构。
html<input id="checkbox1" type="checkbox" value="1">选项1<input id="checkbox2" type="checkbox" value="2">选项2<input id="checkbox3" type="checkbox" value="3">选项33. 初始化Checkbox组件：通过调用EasyUI Checkbox的初始化方法，将HTML元素转换成EasyUI Checkbox组件。
easyui之datagrid的基本使用
编辑文章分类:Web前端加载相关js和css，因为easyui依赖jquery，所有加载easyui前要先加载jquery，否则为提示找不到datagridHtml代码1.<!-- 加载jquery -->2. <script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>3. <!-- 加载jquery-easyui -->4. <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/default/easyui.css">5. <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/icon.css">6. <script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>界面加入Html代码1.<table id="cxdm"></table>加载datagrid的js代码Java代码1.//页面加载2.$(document).ready(function(){3. loadGrid();4.});5.6.//加载表格datagrid7.function loadGrid()8.{9. //加载数据10. $('#cxdm').datagrid({11. width: 'auto',12. height:300,13. striped: true,14. singleSelect : true,15. url:'getPsNewConsultList.action',16. //queryParams:{},17. loadMsg:'数据加载中请稍后……',18. pagination: true,19. rownumbers: true,20. columns:[[21. {field:'adviceid',title: '来文号',align: 'center',width: getWidth(0.2)},22. {field:'consulter',title: '案由',align: 'center',width: getWidth(0.45),23. //添加超级链，并将来文号作为参数传入24. formatter:function(val,rec){25. //alert(rec.adviceid);26. return "<a href='jsp/proposal/psconsultview.jsp?id="+rec.adviceid+"'>"+val+"</a>";27. }28. },29. {field:'content',title: '状态',align: 'center',width: getWidth(0.2)},30. {field:'replynumber',title: '回复数',align: 'center',width: getWidth(0.05)}31. ]]32. });33.}34.35.//为loadGrid()添加参数36. var queryParams = $('#cxdm').datagrid('options').queryParams;37. queryParams.who = who.value;38. queryParams.type = type.value;39. queryParams.searchtype = searchtype.value;40. queryParams.keyword = keyword.value;41. //重新加载datagrid的数据42. $("#cxdm").datagrid('reload');datagrid添加参数的方式Js代码1.//为loadGrid()添加参数2.var queryParams = $('#cxdm').datagrid('options').queryParams;3. queryParams.who = who.value;4. queryParams.type = type.value;5. queryParams.searchtype = searchtype.value;6. queryParams.keyword = keyword.value;7. //重新加载datagrid的数据8. $("#cxdm").datagrid('reload');或者直接添加在url中Js代码1.$('#repeatpspolal').datagrid({2. title:'重复的未初分提案',3. loadMsg:"数据加载中，请稍后……",4. region:'north',5. url:"getRepeatPs.action?documentnumber="+documentnumber+"&simDegree="+simDegree,6.。
easyui-datagrid编辑模式详解
easyui-datagrid编辑模式详解⼀，建⽴编辑器从api得知，扩展⼀种新的编辑器类型，需要提供以上⼏个⽅法。
项⽬中正好需要⼀个checkbox 类型编辑器，但在easyui中并没提供这样的编辑器，那我们可以通过扩展编辑器来解决，扩展如下1 $.extend($.fn.datagrid.defaults.editors, {2 checkbox: {//调⽤名称3 init: function (container, options) {4 //container ⽤于装载编辑器 options,提供编辑器初始参数5 var input = $('<input type="checkbox" class="datagrid-editable-input">').appendTo(container);6 //这⾥我把⼀个 checkbox类型的输⼊控件添加到容器container中7 // 需要渲染成easyu提供的控件，需要时⽤传⼊options,我这⾥如果需要⼀个combobox，就可以这样调⽤ bobox(options);8 return input;9 },10 getValue: function (target) {11 //datagrid 结束编辑模式，通过该⽅法返回编辑最终值12 //这⾥如果⽤户勾选中checkbox返回1否则返回013 return $(target).prop("checked") ? 1 : 0;14 },15 setValue: function (target, value) {16 //datagrid 进⼊编辑器模式，通过该⽅法为编辑赋值17 //我传⼊value 为0或者1，若⽤户传⼊1则勾选编辑器18 if (value)19 $(target).prop("checked", "checked")20 },21 resize: function (target, width) {22 //列宽改变后调整编辑器宽度23 var input = $(target);24 if ($.boxModel == true) {25 input.width(width - (input.outerWidth() - input.width()));26 } else {27 input.width(width);28 }29 }30 }31 });新的编辑扩展好以后，跟系统默认的编辑器使⽤⽅式⼀样：⼆ , 获取编辑器datagrid 通过调⽤ beginEdit 传⼊要开始编辑⾏的对应的索引，该⾏进⼊编辑模式。
easyui checkbox用法 -回复
easyui checkbox用法-回复EasyUI是一种基于jQuery的UI库，它为开发人员提供了一系列交互式和可自定义的UI组件。
其中之一是“checkbox”，它是一种常见的用户界面元素，允许用户选择或取消选择一个或多个选项。
在本文中，我们将深入探讨EasyUI的checkbox用法，逐步解答以下问题：1. 什么是EasyUI checkbox？2. 如何创建一个基本的checkbox？3. 如何设置checkbox的属性和方法？4. 如何处理checkbox的事件？5. 如何使用EasyUI的checkbox控制其他元素？1. 什么是EasyUI checkbox？EasyUI checkbox是一种可视化的复选框，它的样式和功能可以通过EasyUI库进行自定义和配置。
EasyUI checkbox拥有一系列内置的属性和方法，以及可以处理各种事件的能力。
它被广泛应用于Web应用程序的表单和设置界面中。
2. 如何创建一个基本的checkbox？创建一个基本的checkbox非常简单，只需使用EasyUI的HTML标记，并按照以下格式编写代码：html<input class="easyui-checkbox" name="checkboxName" checked="checked">上述代码中，我们使用了input元素，并为其添加了``easyui-checkbox``类，这样EasyUI就可以识别它作为一个checkbox。
``name``属性可以用于表单提交和处理，``checked``属性用于设置checkbox的初始选中状态。
3. 如何设置checkbox的属性和方法？EasyUI checkbox有许多可用的属性和方法可以进行自定义和操作。
以下是一些常用的属性和方法：- ``selected``：获取或设置checkbox的选中状态。
EasyUIDataGrid编辑单元格时使用combogrid
easyUi的组合表格
easyUi的组合表格公司之前的项⽬是⽤easyui写的⾥⾯还混搭着php...把分⽀下来，有点蒙。
晚上回来恶补⼀下吧，今天渲染这个表格，我开始⾃⼰写假数据，然后⽤ajax操作再使⽤ obj.datagrid('loadData', msg); 其实msg是我处理后的数据，但是⽼⼤⼀看马上说，我这不⾏，⽆奈⼜得去看问题，最终发现这个json数据的不⼀样，他是有⾃⼰的key值得。
数据： total的值就是columns的长度，columns 是个数组，row 则代表⾏每⾏的数据，我被这个数据坑了很久。
{"total": 9,"rows": [{"msg_title": "系统消息","msg_status": "已推送","msg_classified": "产品变更","msg_lang": "简体中⽂","user_name": "sheng","msg_position": "万⾢联","msg_receive": "全部客户","msg_time": "2010-2-1","msg_operation": "删除"},{"msg_title": "系统消息","msg_status": "已推送","msg_classified": "产品变更","msg_lang": "简体中⽂","user_name": "shenghui","msg_position": "万⾢联","msg_receive": "全部客户","msg_time": "2010-2-1","msg_operation": "删除"},{"msg_title": "系统消息","msg_status": "已推送","msg_classified": "产品变更","msg_lang": "简体中⽂","user_name": "shenghui","msg_position": "万⾢联","msg_receive": "全部客户","msg_time": "2010-2-1","msg_operation": "删除"}]}下⾯是html和js<!DOCTYPE html><html><hemsg><meta charset="UTF-8"><title>Multiple ComboGrid</title><link rel="stylesheet" type="text/css" href="themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="themes/icon.css"><link rel="stylesheet" type="text/css" href="demo.css"><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jquery.easyui.min.js"></script></hemsg><body><h2>Multiple ComboGrid</h2><p>Click the right arrow button to show the DataGrid and select items.</p><div style="margin:20px 0"></div><div data-options="region:'center',border:false"><table id="tableList"></table></div><input type="text" name="name" value=""><script type="text/javascript">$(function(){$('#tableList').datagrid({panelWidth: 1000,//⽹格的宽度multiple: true, //下拉框可以选择多个值，可省idField: 'itemid',//id的字段名，可省textField: 'productname', // 显⽰在⽂本框中的 text 字段名，可省url: 'msg.json',//数据地址method: 'get', //post 或者get都可以看需求fitColumns: true,//⾃动扩展或收缩列的⼤⼩以适应⽹格宽度和防⽌⽔平滚动条columns: [[ // 表头->Column 是⼀个数组对象,数组元素的元素是⼀个配置对象，它定义了每个列的字段{title:'',field:'ck',checkbox:true},//单选框//title->该列标题⽂本。
详解EasyUi控件中的Datagrid
详解EasyUi控件中的Datagrid最近⼿头有个web项⽬需要⽤到第三⽅控件(EasyUi),⽤第三⽅控件做出来的效果毕竟⽐原⽣态的要稍微好看那么⼀点，该项⽬中有个需求，需要在数据列表中直接编辑数据保存，⾏话叫做⾏内编辑。
在讲⾏内编辑之前，我们需要先了解如何使⽤EasyUi创建⼀个DataGrid，当然⽅式有很多（1.easyui.js，或者直接html代码加easyui的Style），我采⽤的是JS的⽅式：⼀、使⽤Js创建DataGrid上⾯是效果图，Html代码如下：在页⾯定义⼀个table<!--数据展⽰ --><div><table id="DataGridInbound"></table></div>Js代码如下：有⼏个我⾃⼰认为⽐较重要的属性在此标记下url：这⾥是datagrid获取数据集的地址，就是你的Action，需要注意的是，你的Action需要返回Json格式的数据。
pagination：设置datagrid是否分页显⽰queryParams：你的查询条件参数formatter：格式化，在⽇期列⽤到了，EasyUi的datagrid显⽰⽇期如果不格式话，⽇期会乱显⽰这些属性在EasyUi的官⽹都有详细介绍，我就不深⼊解释了。
$("#DataGridInbound").datagrid({title: '⼊库详情',idField: 'Id',rownumbers: 'true',url: '/Inbound/GetPageInboundGoodsDetail',pagination: true,//表⽰在datagrid设置分页rownumbers: true,singleSelect: true,striped: true,nowrap: true,collapsible: true,fitColumns: true,remoteSort: false,loadMsg: "正在努⼒加载数据，请稍后...",queryParams: { ProductName: "", Status: "",SqNo:"" },onLoadSuccess: function (data) {if (data.total == 0) {var body = $(this).data().datagrid.dc.body2;body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 35px; text-align: center;"><h1>暂⽆数据</h1></td></tr>');$(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();}//如果通过调⽤reload⽅法重新加载数据有数据时显⽰出分页导航容器else $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();},columns: [[{ field: 'ck', checkbox: true },{ field: 'Id', hidden: 'true' },{ field: 'InBoundId', hidden: 'true' },{ field: 'ProductId', hidden: 'true' },{ field: 'ProductTypeId', hidden: 'true' },{ field: 'SqNo', title: '⼊库参考号', width: '100', align: 'left', sortable: true },{field: 'Status', title: '状态', width: '100', align: 'left', sortable: true,formatter: function (value, index, row) {if (value == "1") {return '<span style="color:green;">已⼊库</span>';}else if (value == "-1") {return '<span style="color:#FFA54F;">待⼊库</span>';}}},{field: 'InboundDate', title: '⼊库⽇期', width: '100', align: 'left', sortable: true,formatter: function (date) {var pa = /.*\((.*)\)/;var unixtime = date.match(pa)[1].substring(0, 10); //通过正则表达式来获取到时间戳的字符串return getTime(unixtime);}},{ field: 'ProductName', title: '产品名称', width: '100', align: 'left', sortable: true },{ field: 'ProductType', title: '产品类型', width: '100', align: 'left', sortable: true },{ field: 'Num', title: '数量', width: '100', align: 'left', sortable: true },{ field: 'Storage', title: '所属仓库', width: '100', align: 'left', sortable: true },{ field: 'CompanyCode', title: '所属公司', width: '100', align: 'left', sortable: true },{ field: 'CreateBy', title: '操作⼈', width: '100', align: 'left', sortable: true },]],});⼆、今天的重点，DataGrid⾏内编辑如上效果图，我们在DataGrid⾏内直接变数据Js代码如下：如何实现⾏内编辑，需要在你所编辑的单元格中加⼊editor属性，editor属性有个type（他⽀持很多控件类型，可以到官⽹查看）就是编辑的控件类型。
easyui datagrid oncheckall事件
easyui datagrid oncheckall事件摘要：1.事件概述2.事件触发条件3.事件处理函数4.事件应用实例正文：easyui datagrid是一种常用的表格控件，它提供了丰富的客户端事件供开发者使用。
其中，oncheckall事件是一个在表格全选或全不选时触发的客户端事件。
当表格中的所有复选框被选中或取消选中时，oncheckall事件将会被触发。
该事件的触发条件取决于表格的配置，例如是否允许全选、全不选等。
在oncheckall事件处理函数中，通常可以获取表格当前的状态，例如选中的行数、列数等，以便进行相应的业务处理。
同时，还可以通过调用表格的方法，例如setChecked()，来设置表格中某一行或某一列的选中状态。
下面是一个简单的oncheckall事件应用实例。
假设我们有一个easyui datagrid，其id为"dg",表格数据如下：```[{"id":1,"name":"张三","age":25},{"id":2,"name":"李四","age":30},{"id":3,"name":"王五","age":28}]```我们可以为该datagrid绑定oncheckall事件，并在事件处理函数中打印选中的行数。
示例代码如下：```javascript$(function() {$("#dg").datagrid({onCheckAll: function(index, row, rowData, checked) {console.log("选中的行数:",$("#dg").datagrid("getChecked").length);}});});```当表格中的所有复选框被选中或取消选中时，控制台将输出选中的行数。