JQuery Datatables editor进行增删改查操作(二)

背景

上一篇对editor进行了一个基本功能的初始化操作演示，本文进一步了解下editor在上一篇文章功能的基础上添加了部分常用基本功能。

---

整体界面如下图所示：

 

新增界面：

 新增界面增加了单选按钮，下拉框，和时间选择器，还有右下角的“取消”按钮：

                  

时间选择器： 

                     

 

在点击“新增”按钮保存数据时，可以对数据进行客户端验证 ：

            

 

点击“复制”按钮，可以对选中的某一行进行复制后新增，避免太多重复输入：

 

“编辑”界面还是可以对选中行修改所有字段，右下角增加了两个剪头按钮提供在编辑界面进行数据切换：

 

 选中多行还是可以进行对数据的批量修改：

 

可以对选中的一行或者多行进行删除： 

 

---

 editor的JS代码如下图所示：

        editor = new $.fn.dataTable.Editor({
            ajax: {
                create: {
                    url: "/Home/AddData",
                    type: "Post",
                    dataType: "json",
                    data: function (data) {
                        var Person = {};
                        var id;
                        mydata = data.data;
                        for (var key in mydata)
                        {
                            console.log("check create row id:" + key);
                            id = key;
                        }
                        if (key == "0")//新增模式
                        {
                            console.log("entry create mode:");
                            Person.Name = mydata[0].Name;
                            Person.Position = mydata[0].Position;
                            Person.Office = mydata[0].Office;
                            Person.Age = mydata[0].Age;
                            Person.Salary = mydata[0].Salary;
                            Person.Gender = mydata[0].Gender;
                            Person.Level = mydata[0].Level;
                            Person.Date = mydata[0].Date;
                        }
                        else {//复制模式
                            console.log("entry duplicate mode:");
                            Person.Name = mydata[id].Name;
                            Person.Position = mydata[id].Position;
                            Person.Office = mydata[id].Office;
                            Person.Age = mydata[id