zoukankan      html  css  js  c++  java
  • easyui datagrid 添删改(纪录)

    var groups;//用户组为另一个表,所以需先加载,用于编辑时下拉框
    var editindex = undefined;
    var action;
    $(function () {
    $.ajax({
    cache: false,
    async: false,
    type: "POST",
    dataType: 'json',
    url: "/Areas/Manager/Handler/WebStat/AdminList.ashx?classa=grouplist",
    success: function (data) {
    groups = data;//加载用户组json
    }
    });
    list();
    });

    function list() {
    $("#AdminList").datagrid({
    800,
    height: 760,
    title: '管理员列表',
    url: '/Areas/Manager/Handler/WebStat/AdminList.ashx?classa=list',
    singleSelect: true,
    pagination: true,
    pageSize: 30,
    pageList: [30, 50, 100],
    idField: "id",
    columns: [[
    { title: '编号', field: 'id', 40 },
    { title: '用户名', field: 'name', 150, editor: { type: 'validatebox',
    options: { required: true, missingMessage: '不能为空' }//验证编辑框
    }
    },
    { title: '用户组', field: 'gid', 300, formatter: function (value) {
    for (var i = 0; i < groups.length; i++) {
    if (groups[i].gid == value) return groups[i].groupname;
    }
    return value;//用户组为另一个表,加载为用户组表的id,需格式化显示用户组名
    }, editor: { type: 'combobox', options: { valueField: 'gid',
    textField: 'groupname',
    data: groups//编辑时用户组下拉框
    }
    }
    },
    { title: '日期', field: 'data', 160 },
    { title: '操作', field: 'action', 140,
    formatter: function (value, row, index) {
    if (row.editing) {
    var s = '<a href="#" onclick="saverow(this)">Save</a> ';
    var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
    return s + c;
    } else {
    var e = '<a href="#" onclick="editrow(this)">Edit</a> ';
    var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
    return e + d;
    }
    }
    }
    ]],
    toolbar: [{
    text: '增加',
    iconCls: 'icon-add',
    handler: function () {
    insert();
    }
    }],
    onBeforeEdit: function (index, row) {
    row.editing = true;
    updateActions(index);
    },
    onAfterEdit: function (index, row) {
    row.editing = false;
    updateActions(index);
    },
    onCancelEdit: function (index, row) {
    row.editing = false;
    updateActions(index);
    }
    });
    var pager = $('#AdminList').datagrid('getPager'); // 分页
    }

    function updateActions(index) {//只允许一行编辑
    if (endEditing()) {
    $("#AdminList").datagrid('selectRow', index);
    $('#AdminList').datagrid('updateRow', {
    index: index,
    row: {}
    });
    editindex = index;

    } else {
    $('#AdminList').datagrid('selectRow', editindex);
    }
    }
    function endEditing() {
    if (editindex == undefined) { return true; }
    if ($('#AdminList').datagrid('validateRow', editindex)) {
    $('#AdminList').datagrid('endEdit', editindex);
    editindex = undefined; return true;
    } else { return false; }
    }
    function getRowIndex(target) {
    var tr = $(target).closest('tr.datagrid-row');
    return parseInt(tr.attr('datagrid-row-index'));
    }
    function editrow(target) {
    action = "Edit";
    $('#AdminList').datagrid('beginEdit', getRowIndex(target));
    }
    function deleterow(target) {
    $.messager.confirm('Confirm', 'Are you sure?', function (r) {
    if (r) {
    var row = $('#AdminList').datagrid('getSelected');
    if (row) {
    $.ajax({
    cache: false,
    async: false,
    type: "POST",
    dataType: 'json',
    url: "/Areas/Manager/Handler/WebStat/AdminList.ashx?classa=Del&id=" + row.id + "",
    success: function (data) {
    if (data > 0) {
    $('#AdminList').datagrid('reload');
    }
    else {
    $.messager.alert('Warning', '保存错误!');
    }
    }
    });
    }
    $('#AdminList').datagrid('deleteRow', getRowIndex(target));
    }
    });
    }
    function saverow(target) {
    $('#AdminList').datagrid('endEdit', getRowIndex(target));
    var row = $('#AdminList').datagrid('getSelected');
    if (row) {
    $.ajax({
    cache: false,
    async: false,
    type: "POST",
    dataType: 'json',
    url: "/Areas/Manager/Handler/WebStat/AdminList.ashx?classa=" + action + "&id=" + row.id + "&name=" + row.name + "&gid=" + row.gid,
    success: function (data) {
    if (data > 0) {
    $('#AdminList').datagrid('reload');
    }
    else {
    $.messager.alert('Warning', '保存错误!');
    }
    }
    });
    }

    }
    function cancelrow(target) {
    $('#AdminList').datagrid('cancelEdit', getRowIndex(target));
    }
    function insert() {
    if (endEditing()) {
    // var row = $('#AdminList').datagrid('getSelected');
    // if (row) {
    // var index = $('#tt').datagrid('getRowIndex', row);
    // } else {
    index = 0;//添加新内容,只插入到第一行
    // }
    $('#AdminList').datagrid('insertRow', {
    index: index,
    row: {
    status: 'P'
    }
    });
    action = "Add";
    $('#AdminList').datagrid('selectRow', index);
    $('#AdminList').datagrid('beginEdit', index);
    editindex = undefined;

    }
    }

    http://www.jeasyui.com/tutorial/datagrid/datagrid12.php 修改
    未解决:先点击添加,后另点击编辑时,添加的新行未删除(思考中。。。)
  • 相关阅读:
    声明、定义本质的区别:有无内存的分配
    typedef 与 define 的区别
    Linux内核中链表的学习
    C语言数据类型的转换
    状态机
    170311php添加留言页面
    170314网络编程之TCP聊天窗口
    php课堂2简单作业+文件上传之案例
    php案例2——用户列表页
    学生管理系统
  • 原文地址:https://www.cnblogs.com/wdcwy/p/5082518.html
Copyright © 2011-2022 走看看