[JavaScript知识库]layui学习之路——数据表格上传

layui学习之路——数据表格上传（C#）

前端
toolbarDemo里面的是工具栏选项

<script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <asp:button class="layui-btn  layui-btn-sm" lay-event="delete">删除</asp:button>
             <asp:button type="button" class="layui-btn layui-btn-sm" id="test1">
              <i class="layui-icon">&#xe67c;</i>上传
            </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: [], 
                        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
                           };
                       },
                       
                        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
                          }
                    });
                    
					upload.render({
                            elem: '#test1'
                            ,url: 'global/DataService_Test.ashx？action=upload' //此处配置你自己的上传接口即可
                            ,accept: 'file' //普通文件
                            ,exts:'xlsx'
                               ,done:function(res){
                                    if(res==2){
                                        layer.msg('上传成功！');
                                        layui.table.reload(table1);   //只刷新选中表格，
                                        window.parent.location.reload();   //页面刷新
                                        }
                                        else{
                                         layer.msg('上传失败！');
                                        }
                               }
                          });   

              });
        }      

ashx只贴上传代码了,这部分和之前用gridview上传的差不多，就是接收文件方式变了。

public void ProcessRequest(HttpContext context)
        {
         string action = context.Request["action"].ToString();
         if(action=="upload"){
	       		 SqlConnection DB = new SqlConnection(WebConfigurationManager.AppSettings["key1"].ToString());
	             HttpFileCollection files = context.Request.Files;
	             string filename = System.IO.Path.GetFileName(files[0].FileName);
            
                if (Directory.Exists(HttpContext.Current.Server.MapPath("/Content/excel")) == false)//如果不存在就创建file文件夹
                {
                    Directory.CreateDirectory(HttpContext.Current.Server.MapPath("/Content/excel"));
                }
                string url = "/Content/excel/" + filename;
                string path = HttpContext.Current.Server.MapPath(url);
                files[0].SaveAs(path);
                //读取文件保存到数据库
                string conn = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + path + ";Extended Properties='Excel 12.0;HDR=YES;IMEX=1;'";
                OleDbConnection thisconnection = new OleDbConnection(conn);
                thisconnection.Open();
                string Sql = "select * from [Sheet1$]";
                OleDbDataAdapter mycommand = new OleDbDataAdapter(Sql, thisconnection);
                DataSet ds3 = new DataSet();
                mycommand.Fill(ds3, "[Sheet1$]");
                thisconnection.Close();

                 //插入到数据库中
                    DB.Open();
                    int count = ds3.Tables["[Sheet1$]"].Rows.Count;     //获取行数，一行行插入
                    for (int i = 0; i < count; i++)
                    {
                        string col1,col2,col3;

                        col1= ds3.Tables["[Sheet1$]"].Rows[i]["col1"].ToString().Trim();
                        col2= ds3.Tables["[Sheet1$]"].Rows[i]["col2"].ToString().Trim();
                        col3= ds3.Tables["[Sheet1$]"].Rows[i]["col3"].ToString().Trim();
                        string excelsql = "insert into table(col1,col2,col3)values('"+col1+"','"+col2+"','"+col3+"')";


     }
                    context.Response.Write("2");
   }
}

如果要判断excel内容，需要在插入数据库那块用try catch，传递到js，js根据获取的值进行相应提示。暂时懒得写。