easyui datagrid综合功能demo实现
来源：互联网 发布：zeppelin源码下载 编辑：程序博客网 时间：2024/06/05 19:15
实现功能：行内修改，批量行内添加，多条件查询；（查询当中不是联查）
JavaScript：
$(function(){<span style="font-family: Arial, Helvetica, sans-serif;"> initGrid8();</span>
<span style="font-family: Arial, Helvetica, sans-serif;"> });</span>
//定义初始化方法 function initGrid8() { //初始化comblbox数据 initComoboxData(); //给姓名录入框添加清楚图标 $('#txtname').textbox().textbox('addClearBtn', 'icon-clear'); //为日期组合框设置默认值 var now = new Date(); var time1 = now.getFullYear()-50 + "-" + (now.getMonth()+1).toString() + "-" + now.getDate().toString(); var time2 = now.getFullYear() + "-" + (now.getMonth() + 1).toString() + "-" + now.getDate().toString(); $("#datebox1").datebox('setValue', time1); $("#datebox2").datebox('setValue', time2); //各种查询 $("#btn_save").linkbutton({ onClick: function () { grid8Accept(); return false; }}); //$("#btn_search").linkbutton({ onClick: function () { doSearch(); } }); $("#cmbGender").combobox({ onChange: function () { doSearch(); } }); //$("#deptCombobox8").combobox({ onChange: function () { doSearch(); } }); //$("#deptCombobox8").combobox({ onChange: function () { alert(); doSearch(); } }); //$("#datebox1").datebox({ onChange: function (nValue, oValue) { if (oValue != null && oValue != '') { doSearch(); }}}); //主体： $("#dg8").datagrid({ height: 300, width: 800, title: '自定义demo1', fitColumns: true, toolbar: '#tb8', url: '/Home/grid8GetData', queryParams: tbForm8Json("tbForm8"), rownumbers: true, pagination: true, pageNumber:1, sortName: 'NAME', sortOrder: 'desc', multiSort: true, pageList: [5,10,15,20,30,50], pageSize:10, columns: [[ { field: 'ck', checkbox: true }, { field: 'EMPID', title: '员工编号', width: 80, align: 'CENTER',sortable:true}, { field: 'NAME', title: '姓名', width: 120, align: 'CENTER', sortable: true, editor: { type: 'text' } }, { field: 'GENDER', title: '性别', width: 80, align: 'CENTER', sortable: true, editor: { type: 'combobox', options: { textField: 'label', valueField: 'value', data: [{ label: '男', value: '1' }, { label: '女', value: '0' }] } } }, { field: 'BIRTHDAY', title: '出生日期', width: 80, align: 'CENTER', sortable: true, editor: { type: 'datebox' } }, { field: 'DEPTNO', title: '部门', width: 80, align: 'CENTER', sortable: true, editor: { type: 'combobox', options: { textField: 'NAME', valueField: 'DEPTID', url: '/Home/initCombobox8Data', onLoadSuccess: function (res) { var str = JSON.parse(res); if (editIndex != undefined) { var ed = $('#dg8').datagrid('getEditor', { index: editIndex, field: 'DEPTNO' }); $(ed.target).combobox('loadData', str); } if (addRowsCount > 0) { var ed = $('#dg8').datagrid('getEditor', { index: 0, field: 'DEPTNO' }); $(ed.target).combobox('loadData', str); } } } } } ]], onLoadSuccess: function (res) { }, onDblClickRow: function (index,row){ grid8OnClickRow(index,row); } }); } //文本框添加清除图标方法 $.extend($.fn.textbox.methods, { addClearBtn: function (jq, iconCls) { return jq.each(function () { var t = $(this); var opts = t.textbox('options'); opts.icons = opts.icons || []; opts.icons.unshift({ iconCls: iconCls, handler: function (e) { $(e.data.target).textbox('clear').textbox('textbox').focus(); $(this).css('visibility', 'hidden'); } }); t.textbox(); if (!t.textbox('getText')) { t.textbox('getIcon', 0).css('visibility', 'hidden'); } t.textbox('textbox').bind('keyup', function () { var icon = t.textbox('getIcon', 0); if ($(this).val()) { icon.css('visibility', 'visible'); } else { icon.css('visibility', 'hidden'); } }); }); } }); //文本框搜索事件： function doSearch() { $("#dg8").datagrid('reload', tbForm8Json("tbForm8")); }; //添加行 function doAdd() { $("#dg8").datagrid('insertRow', { index: 0, row: { EMPID: 88, NAME:'', GENDER:1, BIRTHDAY:'', DEPTNO:1 } }).datagrid('selectRow', 0).datagrid('beginEdit', 0); if (editIndex != undefined) { editIndex += 1; } addRowsCount += 1; }; //为表单数据转为json： function tbForm8Json(id) { var arr = $("#" + id).serializeArray() var jsonStr = ""; jsonStr += '{'; for (var i = 0; i < arr.length; i++) { jsonStr += '"' + arr[i].name + '":"' + arr[i].value + '",' } jsonStr = jsonStr.substring(0, (jsonStr.length - 1)); jsonStr += '}' var json = JSON.parse(jsonStr); return json } //combobox初始化方法 function initComoboxData() { $("#deptCombobox8").combobox({ url: '/Home/initCombobox8Data', valueField: 'DEPTID', textField: 'NAME', width:70, onLoadSuccess: function (res) { var str = JSON.parse(res); var a = {}; a.DEPTID = '-1'; a.NAME = "不限"; //数组中插入对象 str.unshift(a); $("#deptCombobox8").combobox('loadData', str); }, onChange: function (newValue,oldValue) { if (oldValue != null && oldValue != '') { doSearch(); } } }) $('#deptCombobox8').combobox('select', '-1'); } //行内编辑所需各个方法： function grid8EndEditing() { if (editIndex == undefined) { return true } if ($('#dg8').datagrid('validateRow', editIndex)) { $('#dg8').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } //添加grid的双击行事件方法 function grid8OnClickRow(index,row) { if (editIndex != index) { if (grid8EndEditing()) { $('#dg8').datagrid('selectRow', index) .datagrid('beginEdit', index); editIndex = index; } else { $('#dg8').datagrid('selectRow', editIndex); } } } function grid8Accept() { //关掉编辑行及添加行的编辑状态 $('#dg8').datagrid('endEdit', editIndex); for (var i = 0; i < addRowsCount; i++) { $('#dg8').datagrid('endEdit', i); } if (grid8EndEditing()) { //手动添加保存代码 var rows = $('#dg8').datagrid('getChanges'); var strArr = new Array(); strArr[0] = "EMPID"; strArr[1] = "NAME"; strArr[2] = "GENDER"; strArr[3] = "BIRTHDAY"; strArr[4] = "DEPTNO"; var employees = JSON.stringify(rows, strArr); if ($.trim(employees) != "[]") { $.post('/Home/grid8SaveEditions', employees, function (res) { var resObj = eval('(' + res + ')'); var resTxt = "共添加：" + resObj.addTotal + " 成功:" + resObj.addSuccessCount + "\n共修改：" + resObj.editTotal + " 成功：" + resObj.editSuccessCount; alert(resTxt); }, 'text'); $('#dg8').datagrid('acceptChanges'); } else { alert("您没有做任何添加或修改，请先操作再保存"); }; } }controller: public string grid8GetData() { //获取datagrid排序和分页信息： string sortName=Request.Form["sort"]; string sortOrder=Request.Form["order"]; int pageIndex = Convert.ToInt32(Request.Form["page"]); int pageSize = Convert.ToInt32(Request.Form["rows"]); //字符串转换数据库日期格式：（需要命名空间System.Globalization） DateTimeFormatInfo dtFormat = new System.Globalization.DateTimeFormatInfo(); dtFormat.ShortDatePattern = "yyyy-mm-dd"; List<OracleParameter> parmList =new List<OracleParameter> { new OracleParameter(":NAME","%"+Request.Form["name"]+"%"), //new OracleParameter(":GENDER",Convert.ToInt16( Request.Form["gender"])), //new OracleParameter(":DEPTNO",Convert.ToInt32( Request.Form["deptname"])), new OracleParameter(":STIME",Convert.ToDateTime(Request.Form["stime"],dtFormat)), new OracleParameter(":ETIME",Convert.ToDateTime(Request.Form["etime"],dtFormat)) }; StringBuilder sb= new StringBuilder(" "); if(Request.Form["gender"]!="-1") { parmList.Add(new OracleParameter(":GENDER", Convert.ToInt16(Request.Form["gender"]))); sb.Append("and gender=:GENDER "); } if (Request.Form["deptname"] != "-1") { parmList.Add( new OracleParameter(":DEPTNO", Convert.ToInt32(Request.Form["deptname"]))); sb.Append("and deptno=:DEPTNO"); } string where = sb.ToString(); int total = 0; DataSet ds = grid8Service.GetEmployeesByPaging(where,sortName,sortOrder,pageSize,pageIndex,out total,parmList.ToArray() ); //利用hashtable容器为datagrid提供元数据 Hashtable hs = new Hashtable(); var formatter = new IsoDateTimeConverter(); formatter.DateTimeFormat = "yyyy-MM-dd"; hs.Add("total", total); hs.Add("rows", ds.Tables[0]); //序列化约束： return JsonConvert.SerializeObject(hs, formatter); //string jsonStr = JsonConvert.SerializeObject(ds.Tables[0],formatter); //return jsonStr; } public ActionResult initCombobox8Data() { DataSet ds = grid8Service.GetAllDept(); string jsonStr = JsonConvert.SerializeObject(ds.Tables[0]); return Json(jsonStr); } public string grid8SaveEditions() { //手写表单提交字符串转化对象集合： string data = Request.Form[0]; data = data.Replace('[', ' '); data = data.Replace(']', ' '); string[] sss = { "}," }; string[] ss = data.Split(sss, StringSplitOptions.None); int i = ss.Length; int lastStrLength = ss[i - 1].Length; ss[i - 1] = ss[i - 1].Remove(lastStrLength - 2, 1); List<Employee_wcj> emps = new List<Employee_wcj>(); foreach (string s in ss) { string s1 = s + "}"; Employee_wcj emp = JsonConvert.DeserializeObject<Employee_wcj>(s1); emps.Add(emp); } string res = grid8Service.grid8SaveEditions(emps); return res; }服务层：
public class WCJgrid8
{
public DataSet GetAllDept()
{
string sql = "select * from department_w ";
return OracleHelper.Query(sql);
}
public DataSet GetEmployeesByPaging(string where, string sortName,string sortOrder, int pageSize, int currentPage, out int resultCount, OracleParameter[] parms)
{
String sql = @"select * from employee_w where NAME LIKE :NAME and BIRTHDAY between :STIME AND :ETIME"+where;
//String sql = @"select emp.empid,emp.name as emp_name,emp.gender,emp.birthday,emp.deptno,dept.name dept_name from employee_w AS emp join employee_w AS dept on emp.deptno=dept.deptid where emp.NAME LIKE :NAME and emp.BIRTHDAY between :STIME AND :ETIME" + where;
StringBuilder sortStr = new StringBuilder();
string orderby = "";
if (!string.IsNullOrEmpty(sortName))
{
if (sortName.Contains(','))
{
for (int i = 0; i < sortName.Split(',').Length; i++)
{
sortStr .Append( sortName.Split(',')[i] + " " + sortOrder.Split(',')[i] + ",");
}
sortStr = sortStr.Remove(sortStr.Length-1,1);
}
else
{
sortStr .Append( sortName + " " + sortOrder);
}
orderby = sortStr.ToString();
}
else
{
orderby = "";
}
return OracleHelper.FindPageBySql(sql, orderby, pageSize, currentPage, out resultCount, parms);
}
public string grid8SaveEditions( List<Employee_wcj> emps)
{
int editTotal = 0;
int addTotal = 0;
int editSuccessCount = 0;
int addSuccessCount = 0;
foreach(Employee_wcj emp in emps)
{
if (emp.EMPID != 88)
{
editTotal += 1;
editSuccessCount += grid8SaveUpdate(emp);
}
else
{
addTotal += 1;
addSuccessCount += grid8SaveAdd(emp);
}
}
return "{editTotal:" + editTotal.ToString() + ",addTotal:" + addTotal.ToString() + ",editSuccessCount:" + editSuccessCount.ToString() + ",addSuccessCount:" + addSuccessCount.ToString() + "}";
}
public int grid8SaveUpdate(Employee_wcj emp)
{
//string sql = "update employee_w set
name='"+emp.NAME+"',gender="+emp.GENDER+",birthday='"+emp.BIRTHDAY+"',deptno="+emp.DEPTNO.ToString()+" where empid="+emp.EMPID.ToString()+";";
//int rows = OracleHelper.ExecuteNonQuery(sql,CommandType.Text);
string sql = "update employee_w set name=:name ,gender=:gender, birthday=:birthday,deptno=:deptno where empid=:empid";
DateTimeFormatInfo dtFormat = new System.Globalization.DateTimeFormatInfo();
dtFormat.ShortDatePattern = "yyyy-MM-dd";
OracleParameter[] para = {
new OracleParameter(":name",emp.NAME),
new OracleParameter(":gender",int.Parse(emp.GENDER)),
new OracleParameter(":birthday", Convert.ToDateTime(emp.BIRTHDAY,dtFormat )),
new OracleParameter(":deptno",Convert.ToInt32(emp.DEPTNO)),
new OracleParameter(":empid",Convert.ToInt32(emp.EMPID))
};
int rows = OracleHelper.ExecuteNonQuery(sql, CommandType.Text, para);
return rows;
}
public int grid8SaveAdd(Employee_wcj emp)
{
//参数数组和todate（）方法结合使用的sql语句
//string sql = "insert into employee_w values("+emp.EMPID.ToString()+",'"+emp.NAME+"',"+emp.GENDER.ToString()+",to_date('"+emp.BIRTHDAY+"','yyyy-mm-dd'),"+emp.DEPTNO.ToString()+");";
//int rows = OracleHelper.ExecuteNonQuery(sql,CommandType.Text);
string sql = "insert into employee_w values(:empid,:name,:gender,to_date(:birthday,'yyyy-mm-dd'),:deptno)";
DateTimeFormatInfo dtFormat = new System.Globalization.DateTimeFormatInfo();
dtFormat.ShortDatePattern = "yyyy-MM-dd";
OracleParameter[] para = {
new OracleParameter(":name",emp.NAME),
new OracleParameter(":gender",int.Parse(emp.GENDER)),
new OracleParameter(":birthday", Convert.ToDateTime(emp.BIRTHDAY,dtFormat )),
new OracleParameter(":deptno",Convert.ToInt32(emp.DEPTNO)),
new OracleParameter(":empid",Convert.ToInt32(emp.EMPID))
};
int rows = OracleHelper.ExecuteNonQuery(sql, CommandType.Text, para);
return rows;
}
}
文章来源：http://blog.csdn.net/wcj920946195
0 0
- easyui datagrid综合功能demo实现
- easyui综合布局demo
- easyUI datagrid实现反选功能
- easyui Datagrid+searchbox 实现搜索功能
- EasyUI datagrid SpringMVC JPA 翻页功能实现
- .net+EasyUI+datagrid DEMO
- EasyUI之datagrid学习Demo
- JQuery EasyUI 的datagrid 整合Struts2的查询功能实现
- 实例：SSH结合Easyui实现Datagrid的批量删除功能
- EasyUI DataGrid使用formatter属性实现自定义功能
- easyUI..关于datagrid实现追加一行做统计功能
- EasyUI DataGrid 实现单行/多行编辑功能
- easyui实现datagrid打印
- easyui实现datagrid行内编
- easyui实现datagrid打印
- easyui datagrid 行编辑功能
- 实例：SSH结合Easyui实现Datagrid的新增功能和Validatebox的验证功能.
- 实例：SSH结合Easyui实现Datagrid的新增功能和Validatebox的验证功能.
- OkHttp的简单使用
- github命令
- JTable 为单元格添加按钮效果和事件效果
- C#依赖注入实例解析
- Linux 内核空间虚拟地址和物理地址相互转换
- easyui datagrid综合功能demo实现
- maven+springmvc+mybatis项目从properties读数据库连接属性时拿不到连接，的研究与解决方案
- python-scipy 图像处理
- listView的优化
- linux系统的特点以及知识简介
- [疯狂Java]面向对象：基本类型的包装器类型、自动装箱/拆箱、包装器类型大小/相等比较
- 霍夫曼编码压缩算法
- 剑指offer-算法和数据结构：查找和排序
- 如何退出 Activity，如何安全退出已调多个Activity的 的 Application？
