layui学习之路——编辑数据表格
代码延用之前的
html
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<asp:button class="layui-btn layui-btn-sm" lay-event="delete">删除</asp:button>
</div>
</script>
<table id="demo" lay-filter="test" ></table>
js
$(document).ready(function() {
reloadTable();
});
//加载表格这块和上一篇一样，直接复制过来了
function reloadTable(){ //这里将数据表格封装成一个方法，方便之后添加功能
layui.use(['upload', 'element', 'layer','table'],function(){
var table=layui.table;
var index = layer.load(1); //添加laoding,0-2两种方式
table.render({
elem:'#demo', //对应html的table的id
height:600, //整张表的高度，设置高度后自动锁定表头
url:'global/DataService_Test.ashx' , //数据源，就是下面的文件
loading:false, //加载条
method:'post', //post方法本地第一次加载IE会报error，谷歌没问题
page:false, //分页
// toolbar: '#toolbarDemo', //指向自定义工具栏
defaultToolbar: [],
//limit:20,
request: {
pageName: 'page', //页码的参数名称，默认：page
limitName: 'limit' //每页数据量的参数名，默认：limit
},
id: 'table1',
parseData: function(res) {
return {
"code": res.code, //数据状态的字段名称，默认：code
"msg": res.msg, //成功的状态码，默认：0
"count": res.count, //状态信息的字段名称，默认：msg
"data": res.data//数据总数的字段名称，默认：count
//dataName: 'data' //数据列表的字段名称，默认：data
};
},
cols:[[
{type:'radio'} //单选列
,{field: 'col1', title: 'col1', align:'center'}
,{field: 'col2', title: 'col2',align:'center'}
,{field: 'col3', title: 'col3',width:100, align:'center'}
]],
done: function(res, curr, count) { //返回数据执行回调函数
console.log(res); //所有数据
console.log(curr); //得到当前页码
console.log(count);//得到数据总量
layer.close(index); //返回数据关闭loading
}
});
table.on('toolbar(test)',function(obj){ //删除事件，test为lay-filter的值，记得写在 layui.use(['upload', 'element', 'layer','table'],function()这个里面
var checkStatus = table.checkStatus(obj.config.id);
var data = checkStatus.data; //获取选中的数据
switch(obj.event){
case 'delete':
if (data.length > 0) {
var col1= data[0].col1;
layer.open({
title: '你确定删除' + col1+ '?'
, btn: ['确定', '取消']
, yes: function(index, layero) {
//layer.msg('确定');
var p1 = new Object();
p1.name = "col1";
p1.value = col1;
var array = [];
array.push(p1);
$.ajax({ //给删除模块传递col1参数
url: "global/ActionService.ashx?action=deleteRow",
type: "POST",
cache: false,
dataType: "json",
async: false,
data: JSON.stringify(array),
success: function(result) {
if (result == 1) {
layer.msg('删除成功！');
//layui.table.reload('table1');//这个刷新不知道为什么没用……
// window.location.reload(); //这两个刷新效果差不多
window.parent.location.reload();
}
else {
layer.msg('删除失败！');
return false;
}
},
error: function(result) {
}
});
}
, btn2: function(index, layero) {
layer.close(index);
}
});
} else { layer.msg('请先选择一条数据'); }
break;
}
});
});
}
***layui.use(['table'], function(){
var table = layui.table
,util = layui.util;
//监听单元格编辑
table.on('edit(test)', function(obj){ //test为lay-filter值
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有键值
,field = obj.field; //得到字段
layer.msg('' + field + ' 字段更改值为：'+ value);
var p1 = new Object();
var p2 = new Object();
var p3 = new Object();
p1.name = "fieldName"; //修改的字段名
p1.value = field;
p2.name = "fieldValue"; //修改的字段值
p2.value = value;
p3.name="col1"; //数据库表中的主键
p3.value=data.col1;
var array = [];
array.push(p1); array.push(p2); array.push(p3);
$.ajax({
url: "global/ActionService.ashx?action=editRow",
type: "POST",
cache: false,
dataType: "json",
async: false,
data: JSON.stringify(array), //给编辑模块传递参数
});
});
});***
两个ashx应该可以合并的，传递数据用action区分
DataService_Test.ashx
public class DataService_Test : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
DataSet ds = new DataSet();
SqlConnection DB = new SqlConnection(WebConfigurationManager.AppSettings["key"].ToString());
string sql_text = @"select col1,col2,col3 from table";
DB.Open();
SqlDataAdapter objAdapter = new SqlDataAdapter(sql_text, DB);
objAdapter.Fill(ds, "data");
context.Response.Write(ToJsonTableRun(ds.Tables["data"])); //输出datatable
DB.Close();
}
public string ToJsonTableRun(DataTable dt) { //datatable数据转化为json格式
JavaScriptSerializer JavaScriptSerializer = new JavaScriptSerializer();
JavaScriptSerializer.MaxJsonLength = int.MaxValue;
ArrayList arrayList = new ArrayList();
foreach(object obj in dt.Rows){
DataRow dataRow = (DataRow)obj;
Dictionary<string,object> dictionary=new Dictionary<string,object>();
foreach(object obj2 in dt.Columns){
DataColumn dataColumn = (DataColumn)obj2;
dictionary.Add(dataColumn.ColumnName,dataRow[dataColumn.ColumnName].ToString());
}
arrayList.Add(dictionary);
}
Hashtable tableMap = new Hashtable();
tableMap.Add("code", "0");
tableMap.Add("msg", "");
tableMap.Add("count", arrayList.Count);
tableMap.Add("data", arrayList);
return JavaScriptSerializer.Serialize(tableMap);
}
public bool IsReusable
{
get
{
return false;
}
}
}
ActionService.ashx
public void ProcessRequest(HttpContext context)
{
string action = context.Request["action"].ToString(); //获取进行的动作
SqlConnection DB = new SqlConnection(WebConfigurationManager.AppSettings["key"].ToString());
if (action == "deleteRow") //删除
{
DB.Open();
string json = string.Empty;
using (var reader = new StreamReader(context.Request.InputStream))
{
json = reader.ReadToEnd();
}
string col1= string.Empty;
if (!String.IsNullOrEmpty(json))
{
var paraList = new JavaScriptSerializer().Deserialize<List<Para>>(json); //自己新建一个类
foreach (Para p in paraList)
{
switch (p.name)
{
case "col1": //根据col1进行删除
col1= p.value;
break;
}
}
}
string sql_del = "delete from table where col1='" + col1+ "'";
SqlCommand sqlCommand = new SqlCommand(sql_del, DB);
sqlCommand.ExecuteNonQuery();
DB.Close();
context.Response.Write("1"); //输出1就代表删除成功
}
else if (action=="editRow"){ //编辑
DB.Open();
string json = string.Empty;
using (var reader = new StreamReader(context.Request.InputStream))
{
json = reader.ReadToEnd();
}
string fieldName = string.Empty;
string fieldValue = string.Empty;
string col1= string.Empty;
if (!String.IsNullOrEmpty(json))
{
var paraList = new JavaScriptSerializer().Deserialize<List<Para>>(json);
foreach (Para p in paraList)
{
switch (p.name)
{
case "fieldName":
fieldName = p.value; //得到编辑字段名
break;
case "fieldValue":
fieldValue = p.value; //得到编辑字段值
break;
case "col1":
col1= p.value; //根据col1更新数据库
break;
}
}
}
string sql_edit = "update table set " + col2+ "='"+fieldValue+"' where col1=" + col1+ "";
SqlCommand cmdedit = new SqlCommand(sql_edit,DB_RTD);
cmdedit.ExecuteNonQuery();
}
public class Para
{
public string name { get; set; }
public string value { get; set; }
}
}
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
