JQuery DataTables Editor---页面内容修改&&数据库信息修改 (1)
2013-10-28 15:18
513 查看
我们使用jquery datatables 不光是为了对数据的展示,同时需要对数据惊行简单的操作,这个操作分为两个部分:1.页面内容的修改;2.对应的数据库信息的修改。
前一篇博文介绍了页面级的操作,这片文章主要是数据库内容的更改。
需求:如下图所示,对datatables的内容进行添加,编辑,删除的操作。
分析:添加功能---单击add按钮,弹出对话框,添加新的内容。
编辑功能---单击datatables可以选中一行,此行改变颜色,即是已经选中,单击edit按钮,弹出dialog,此dialog中的内容是我们选中行的内容。如果没有选中行,点击edit按钮,则不会弹出dialog。当双击datatables中的某一行时,也弹出dialog,并且双击的行改变颜色,dialog中的内容是我们双击行的内容。
删除功能---单击datatables选中一行,单击delete按钮,弹出警告框,提示要不要删除所选内容。当没有选中任何内容时,单击delete按钮,不会弹出警告框,也不会删除内容。
3. 编码:
上面代码说明:这段代码主要分了两个部分,第一部分是jquery datatables的声明,<table id="gridtable" class="gridtable">;第二部分是dialog的声明,以及操作所需要的action,此部分的操作选择ajax无刷新页面技术。
所需js的代码:
上面代码说明:这段代码分别为dialog 的声明,datatables的声明以add,edit,delete的操作。
添加功能效果图
编辑功能效果图:
删除效果图:
到此,功能已经全部实现,所需的代码也已经贴出。
前一篇博文介绍了页面级的操作,这片文章主要是数据库内容的更改。
需求:如下图所示,对datatables的内容进行添加,编辑,删除的操作。
分析:添加功能---单击add按钮,弹出对话框,添加新的内容。
编辑功能---单击datatables可以选中一行,此行改变颜色,即是已经选中,单击edit按钮,弹出dialog,此dialog中的内容是我们选中行的内容。如果没有选中行,点击edit按钮,则不会弹出dialog。当双击datatables中的某一行时,也弹出dialog,并且双击的行改变颜色,dialog中的内容是我们双击行的内容。
删除功能---单击datatables选中一行,单击delete按钮,弹出警告框,提示要不要删除所选内容。当没有选中任何内容时,单击delete按钮,不会弹出警告框,也不会删除内容。
3. 编码:
Attributes//名称 <table id="gridtable" class="gridtable">//声明jquery datatables <thead> <tr> <th>Name </th> <th>Value </th> <th>DisplayOrder </th> </tr> </thead> <tbody> .....//datatables内容,此处省略 </tbody> </table> <input type="button" id="add" value="Add" />//添加按钮 <input type="button" id="edit" value="Edit" />//编辑按钮 <input type="button" id="delete" value="Delete" />//删除按钮 <div id="e_Attributes">//声明dialog,异步更新 @using (Ajax.BeginForm("Update", "Product", new AjaxOptions { UpdateTargetId = "d_Attributes", OnSuccess = "dialogClose", HttpMethod = "Post", })) { <table> <tbody> <tr> <td>Name</td> <td> <input id="name" name="Name" type="text" style="width:250px" class="required"/>*</td> </tr> <tr> <td>Value</td> <td> <input id="value" name="Value" type="text" style="width:250px" class="required"/>*</td> </tr> <tr> <td>DisplayOrder</td> <td> <input id="displayOrder" name="DisplayOrder" type="text" style="width:128px" class="required"/>*</td> </tr> <tr> <td> <input id="submit" type="submit" name="submit" value="Submit" /> <input id="hiddenValue" type="hidden" name="hiddenValue" /> </td> </tr> </tbody> </table> } </div>
上面代码说明:这段代码主要分了两个部分,第一部分是jquery datatables的声明,<table id="gridtable" class="gridtable">;第二部分是dialog的声明,以及操作所需要的action,此部分的操作选择ajax无刷新页面技术。
所需js的代码:
<script type="text/javascript"> function dialogClose() { $("#e_Attributes").dialog("close"); } $("#e_Attributes").dialog({ modal: true, autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 }, width: 400 }); var editor; $(function () { //声明datatable $("#gridtable").dataTable().fnDestroy(); editor = $('#gridtable').dataTable({ "bInfo":false, "bServerSide": false, 'bPaginate': false, //是否分页。 "bProcessing": false, //当datatable获取数据时候是否显示正在处理提示信息。 'bFilter': false, //是否使用内置的过滤功能。 'bLengthChange': false, //是否允许用户自定义每页显示条数。 'sPaginationType': 'full_numbers', //分页样式 }); //单击,赋值,改样式 $("#gridtable tbody tr").click(function (e) { if ($(this).hasClass('row_selected')) { $(this).removeClass('row_selected'); putNullValue() } else { editor.$('tr.row_selected').removeClass('row_selected'); $(this).addClass('row_selected'); var aData = editor.fnGetData(this); if (null != aData) { putValue(aData); } } }); //双击 $("#gridtable tbody tr").dblclick(function () { if ($(this).hasClass('row_selected')) { //$(this).removeClass('row_selected'); } else { editor.$('tr.row_selected').removeClass('row_selected'); $(this).addClass('row_selected'); } var aData = editor.fnGetData(this); if (null != aData) { putValue(aData); } $("#hiddenValue").val("edit"); $("#e_Attributes").dialog("open"); }); //添加 $("#add").click(function () { editor.$('tr.row_selected').removeClass('row_selected'); putNullValue(); $("#hiddenValue").val("add"); $("#e_Attributes").dialog("open"); }); //编辑 $("#edit").click(function () { var productAttributeID = $("#productAttributeID").val(); if (productAttributeID != "" && productAttributeID != null) { $("#hiddenValue").val("edit"); $("#e_Attributes").dialog("open"); } }); //删除 $("#delete").click(function () { var productAttributeID = $("#productAttributeID").val(); var productID = $("#productID").val(); if (productAttributeID != null && productAttributeID != "") { if (confirm("Delete?")) { $.ajax({ type: "GET", url: "@Url.Action("DeleteAttribute", "Product")", data: { ProductID: productID, ProductAttributeID: productAttributeID },//参数名要和Action 中的参数名相同 dataType: "html", cache: false, success: function (result) { $("#d_Attributes").html(result); $("#productAttributeID").val(null); } }); } } }); //赋空值,并去除input-validation-error样式(此样式不管有无,均可去除,所以不用判断了) function putNullValue() { 。。。。。。//此处省略 } //赋值 function putValue(aData) { 。。。。。。//此处省略 } }); $.ajaxSetup({ cache: false }); </script>
上面代码说明:这段代码分别为dialog 的声明,datatables的声明以add,edit,delete的操作。
添加功能效果图
编辑功能效果图:
删除效果图:
到此,功能已经全部实现,所需的代码也已经贴出。
相关文章推荐
- JQuery DataTables Editor---页面内容修改&&数据库信息修改 (2)
- CSDN修改个人资料的功能,如果内容不符合交互规则,页面没有提示信息
- jQuery打印插件(jQuery.print.js)在单页面中,打印的是首页的信息而不是iframe的内容
- 修改用户信息的时候,使用Servlet对新的数据和数据库的数据进行对比,修改成功实现页面的弹窗和页面的跳转
- 夺命雷公狗---DEDECMS----23dedecms修改内容页面展示的信息
- 通过查询数据库中的数据匹配在页面上:(set单条数据属性是在页面上的显示与foreach的不同) 通过ID修改提取位置表信息
- php 修改企业黄页中退稿信息{$infos['subject']} 的样式和内容
- 源码-JavaScript&jQuery交互式前端开发-第7章-JQuery-修改内容
- [ASP.NET]采用JQuery静态的修改页面TABLE内容
- 使用PHP向Mysql数据库插入信息,页面中文内容显示正常,但在数据库里却是乱码,这个怎么解决?
- 求助 这是我的mfc下一个修改数据库信息的一段代码,里面执行到m_Ado.m_pRecordset->Update(); 这句话的时候就会出现异常,而且修改不了数据库内的信息。
- JQuery根据下拉列表的值动态修改页面内容
- Jquery 将存进数据库的内容html到页面
- [JS&Jquery]实现页面表格中相同内容的行或列合并
- 这两天使用jquery-mobile写手机页面遇到的append样式不生效,以及listview内容显示不完解决方法
- 修改网页页面内容
- ContentProvider获取手机信息,简单修改数据库数据
- 用户输入什么,页面就显示什么。(如:换行, '"<br>等,如下图数据库所示)
- 如何修改系统注册信息(注册机构&&注册名)
- 利用SQL语句删除或修改织梦DedeCms数据库内容